指令
v-cloak 它会在Vue实例结束编译时从绑定的html元素上移除,经常和css的display:none配合使用if
v-if,v-else-if,v-else
和js的条件语句if、else、else if 类似,vue.js的条件指令可以根据表达式的 值在DOM中渲染或销毁元素/组件,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="lianxi">
<p v-if="status === 1">当status为1时显示该行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
<script>
var vm=new Vue({
el:"#lianxi",
data:{
status:3
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="lianxi">
<template v-if="type === 'name'">
<lable>用户名</lable>
<input placeholder="输入用户名">
</template>
<template v-else>
<lable>邮箱</lable>
<input placeholder="输入邮箱">
</template>
<button @click="handleClick">切换输入类型</button>
<script>
var vm = new Vue({
el:'#lianxi',
data:{
type:'name'
},
methods:{
handleClick:function(){
this.type=this.type === 'name'? 'mial':'name'
}
}
})
</script>
</div>
</body>
</html>
v-show:v-show的用法与v-if基本一致,只不过v-show是改变元素的CSS属性display,当v-show的表达式值为false时,元素会隐藏,查看DOM结构会看到元素上加载了内联样式:display:none
v-if 与v-show的选择:两者具有类似的功能,不过v-if才是真正的条件渲染,它会根据表达式适当的销毁或重建元素以及绑定的事件或子组件。若表达式的初始值为false则一开始元素或组件并不会渲染,只有当条件第一次变为真时才开始编译。而v-show只是简单的css属性切换,无论条件真与否,都会被编译。相比之下v-if更适合条件不经常改变的情境,因为它切换开销相对较大,而v-show适用于频繁切换条件。
列表渲染指令v-for:
当需要将一个数组遍历或枚举一个对象循环显示时,就会用到v-for。它的表达式需结合in来使用,类似item in items的形式,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="lianxi" v-for=>
<ol>
<li v-for="book in books">{{book.name}}</li>
</ol>
</div>
<script>
var vm= new Vue({
el:'#lianxi',
data:{
books:[
{name:'《Vue实战》'},
{name:'《Javascript语言精粹》'},
{name:'《Java高级程序设计》'},
]
}
})
</script>
</body>
</html>