Vue中的指令是指带有v-前缀的特殊属性,Vue中通过指令实现一系列功能
条件渲染
通过使用和条件渲染相关的指令,可以控制元素是否渲染到页面上
v-if
v-if指令后值为true时显示(会隐式转为true的值也一样),为false时不显示,下面这段代码中,最后页面只有span1
<div id="app">
<span v-if="flag">span1</span>
<span v-if="!flag">span2</span>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
flag: true
}
});
</script>
如果要让v-if控制多个标签,可以使用template标签将这些标签包裹起来,且最后渲染的时候不会出现template标签
<div id="app">
<template v-if="flag">
<span>span1</span>
<span>span2</span>
</template>
<template v-if="!flag">
<span>span3</span>
<span>span4</span>
</template>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
flag: true
}
});
</script>
最后渲染得到的结果为
<div id="app">
<span>span1</span>
<span>span2</span>
<!---->
</div>
v-show
v-show的用法与v-if类似,取决于后面的值是true还是false,下面的代码在页面渲染后还是只有span1
<div id="app">
<span v-show="flag">span1</span>
<span v-show="!flag">span2</span>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
flag: true
}
});
</script>
v-if VS v-show
v-if和v-show都能使元素“消失”,但两者还是有所不同的,使用v-if时,若其后值为false,则在渲染时不会渲染该标签;而使用v-show时,若其后值为false,只是将该标签的display设置为none。
<div id="app">
<span v-if="!flag">span1</span>
<span v-show="!flag">span2</span>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
flag: true
}
});
</script>
上面的代码在页面中会渲染为
<div id="app">
<!---->
<span style="display: none;">span2</span>
</div>
可以看到,使用v-if的span标签不见了,而使用v-show的标签设置了display为none
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗,如果页面不经常更新的话,可以使用v-if,如果经常更新的话,使用v-show会更合理
除此之外,v-show无法使用template来包裹多个标签
v-else
v-else对应于v-if使用,用于实现两个标签一个显示一个隐藏的情况
<div id="app">
<span v-if="flag">span1</span>
<span v-else>span2</span>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
flag: true
}
});
</script>
最后页面只显示span1
列表渲染
使用列表渲染可以直接渲染一组值,在Vue中使用v-for来实现,需要以item in items 的语法来实现,其中item是具体值成员,items是值所在的列表
数组内容渲染
使用v-for可以直接对一个数组内的值进行渲染
<div id="app">
<li v-for="item in list">{{item}}</li>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
list: [1, 2, 3, 4]
}
});
</script>
渲染后的页面为
<div id="app">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
对象属性渲染
对对象进行渲染时,渲染的内容是对象的属性值
<div id="app">
<li v-for="item in obj">{{item}}</li>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
obj: {
id: 1,
name: '小明',
age: 18
}
}
});
</script>
渲染后的页面为
<div id="app">
<li>1</li>
<li>小明</li>
<li>18</li>
</div>
如果要遍历键名的话,需要添加多一个值
<div id="app">
<li v-for="(val,key) in obj">{{key}}:{{val}}</li>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
obj: {
id: 1,
name: '小明',
age: 18
}
}
});
</script>
渲染后的页面为
<div id="app">
<li>id:1</li>
<li>name:小明</li>
<li>age:18</li>
</div>
整数迭代渲染
v-for也可以对一个整数进行迭代渲染,即从1到该整数
<div id="app">
<li v-for="item in 4">{{item}}</li>
</div>
渲染后的页面为
<div id="app">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
表单控件绑定
表单空间绑定通过v-model来实现,它可以根据控件类型来选取正确的方法更新数据。v-model只能在表单控件中使用。
文本
<div id="app">
<input type="text" v-model="msg">
<!-- <textarea v-model="msg"></textarea> -->
<p>{{msg}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: ""
}
});
</script>
这里在文本框输入内容时,msg会跟着进行更新,多行文本框也是一样的。
单选按钮
选择单选按钮时,会将该按钮的value值赋给v-model绑定的属性。
<div id="app">
<input type="radio" value="first" v-model="radio">
<label>first</label>
<input type="radio" value="second" v-model="radio">
<label>second</label>
<br>
<span>Checked names: {{ radio }}</span>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
radio: ""
}
});
</script>
复选框
对于单个复选框,复选框选中时值为true,没有选中时值为false
<div id="app">
<input type="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
checked: false
}
});
</script>
当选中复选框时,checked会变为true,当再点取消选中时,checked就会变成false。
当有多个复选框时,点击复选框会把该复选框的value加入到v-model绑定的数组里。
<div id="app">
<input type="checkbox" value="Jack" v-model="checkedNames">
<label>Jack</label>
<input type="checkbox" value="John" v-model="checkedNames">
<label>John</label>
<input type="checkbox" value="Mike" v-model="checkedNames">
<label>Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
checkedNames: []
}
});
</script>
这里要注意的是,如果checkedNames不是数组,而是一个值的话,在选中复选框时该值会变成true。checkedNames可以是一个非空的数组。
单选列表
单选列表会将选中的option值传给v-model绑定的值
<div id="app">
<select v-model="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<p>{{select}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
select: ""
}
});
</script>
多选列表
单选列表会将选中的option值加入到v-model绑定的数组
<div id="app">
<select v-model="select" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<p>{{select}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
select: []
}
});
</script>
修饰符
lazy
默认情况下,v-model在input中是与输入同步的,而使用了lazy修饰符后会与change同步,即在输入时不会随着输入改变,而焦点离开该input后如果值改变,则会跟着改变
<div id="app">
<input type="text" v-model.lazy="msg">
<p>{{msg}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: ""
}
});
</script>
number
number修饰符会将用户的输入值转为number类型,如果原值转换类型为NaN则变回原值
<div id="app">
<input type="text" v-model.number="msg">
<p>{{msg}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: ""
}
});
</script>
trim
trim会过滤输入框内容的首尾空格
<div id="app">
<input type="text" v-model.trim="msg">
<p>{{msg}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: ""
}
});
</script>