vue的内部指令
v-if v-else-if v-else v-show 条件指令
1、v-if
v-if:是vue 的一个内部指令，指令用在我们的html中。
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。
代码如下：
<div id="app">
<h1 v-if='isShow'>{{msg}}</h1>
<button @click='isShow=(isShow?false:true)'>按钮</button>
</div>
<script>
new Vue({
el:'#app',
data: {
msg:'abc',
isShow:true
},
})
</script>
效果如下：
2.v-else-if v-else
<div id="app">
<div v-if="name=='mm'">
mm
</div>
<div v-else-if="name=='hh'">
hh
</div>
<div v-else>
其他人
</div>
</div>
<script>
new Vue({
el:'#app',
data: {
name:'cc'
}
})
</script>
3.v-show
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
<div id="app">
<h1 v-show='isShow'>{{msg}}</h1>
<button @click='isShow=(isShow?false:true)'>按钮</button>
</div>
<script>
new Vue({
el:'#app',
data: {
msg:'abc',
isShow:true
},
})
</script>
v-if和v-show的区别：
- v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
- v-show：调整css dispaly属性，可以使客户端操作更加流畅。
v-for循环指令
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
<div id="app">
<div v-for="(item,index) in arr">
{{index+"年龄"+item.age+";"+"名字"+item.name}}
<div v-for="(items,indexs) in item.favor">
{{indexs+items}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'cc',
arr: [{
age: 18,
name: "menphis",
favor: ["哈哈", "卖萌"]
}, {
age: 50,
name: "jack",
favor: ["智障", "猫咪"]
}, {
age: 99,
name: "minnie",
favor: ["夜猫", "傻二哈"]
}]
}
})
</script>
未完待续~~