- 语法：
<template>
<div class="home">
<p>{{name}}</p> <!--数据绑定-->
<p v-once>{{name}}</p> <!--渲染后不会被改变-->
<p>{{name ? "ok" : "no"}} </p> <!--javaScript表达式-->
<p v-html="html"></p> <!--输出HTML-->
<p :class="{class}"></p> <!--是否使用该类-->
<p @click="click">点击</p> <!--点击执行事件-->
<input type="text" v-model="name"> <!--表单控件双向数据绑定-->
</div>
</template>
<script>
export default {
data() {
return {
name: '有趣的二货',
html: '<p>这里带有HTML标签</p>',
class: true
}
},
methods: {
click() {
console.log('操作成功')
}
}
}
</script>
- 条件：
<template>
<div class="home">
<!--v-if 和 else-if 如JavaScript中if(){}else{}-->
<p v-if="type == 'A'">A</p>
<p v-else-if="type == 'B'">B</p>
<p v-else-if="type == 'C'">C</p>
<p v-else>Not</p>
<!--v-show 根据 show 值 true false 展示隐藏-->
<p v-show="show">Hello!</p>
</div>
</template>
<script>
export default {
data() {
return {
type: 'C',
show: true
}
}
}
</script>
循环
<template>
<div id="app">
<ul>
<li v-for="(item, index) in list" :key="index">
{{ index }} , {{ item.value }}
</li>
</ul>
<!--模版内可以使用template模版占位符进行v-for或v-if等操作
<template v-for="(item, index) in list" :key="index">
<div>{{ index }} . {{ value }}</div>
</template>
</div>
</template>
<script>
export default {
data() {
return {
list: [{
value: '一'
}，{
value: '二'
},{
value: '三'
}]
}
}
}
</script>
