Vue 条件渲染指令
和JavaScript的条件语句一样,vue的条件指令可以根据表达式的值在dom中渲染或者销毁元素/组件,常用的条件指令有:v-ifv-else-ifv-else其中v-if可以单独使用,v-else-if必须紧跟v-if,v-else必须紧跟v-else-if或者v-if。当表达式的值为true时,当前元素/组件及所有的子节点都将会被渲染,反之被移除。如果一次判断的是多个元素...
和JavaScript的条件语句一样,vue的条件指令可以根据表达式的值在dom中渲染或者销毁元素/组件,常用的条件指令有:
- v-if
- v-else-if
- v-else
其中v-if可以单独使用,v-else-if必须紧跟v-if,v-else必须紧跟v-else-if或者v-if。当表达式的值为true时,当前元素/组件及所有的子节点都将会被渲染,反之被移除。
如果一次判断的是多个元素或组件,那么可以在元素上使用条件指令,最终渲染的结果不会包含该元素。
让我们看个实例:
<!--条件渲染指令示例-->
<template>
<div>
<template v-if="inputType === 'name'">
<label>用户名:</label>
<input placeholder="请输入用户名"/>
</template>
<template v-else-if="inputType === 'mail'">
<label>邮箱:</label>
<input placeholder="请输入邮箱"/>
</template>
<template v-else>
<label>手机号码:</label>
<input placeholder="请输入手机号码"/>
</template>
<button @click="changeInputType">切换输入类型</button>
</div>
</template>
<script>
export default {
name: "ConditionalRender",
data() {
return {
inputType: 'name'
}
},
methods: {
changeInputType: function () {
if (this.inputType === 'name') {
this.inputType = 'mail';
}
else if (this.inputType === 'mail') {
this.inputType = 'phone';
}
else {
this.inputType = 'name';
}
}
}
}
</script>
<style scoped>
label {
font-weight: bold;
}
button {
margin-left: 10px;
}
</style>
运行程序:
然后,我们点击按钮进行切换:
我们试着在输入框内输入内容,进行切换:
切换后:
我们可以发现,输入框的内容没有发生变化,还是我们刚开始输入的姓名。按照我们的猜测,切换后,输入框应该是对应的placeholder内容。
这里设计到vue的渲染机制,在渲染元素的时候,vue出于效率的考虑,会尽可能的复用已有的元素而非重新进行渲染,所以我们就会发现上面的现象,也就是说input元素被复用了。
那么,如果我们不希望vue复用这些元素,我们可以使用vue提供的key属性,它可以让我们自己决定是否复用元素,注意一点:key值必须是唯一的。
我们修改上面的代码,为input元素添加key属性:
<template v-if="inputType === 'name'">
<label>用户名:</label>
<input placeholder="请输入用户名" key="name-input"/>
</template>
<template v-else-if="inputType === 'mail'">
<label>邮箱:</label>
<input placeholder="请输入邮箱" key="mail-input"/>
</template>
<template v-else>
<label>手机号码:</label>
<input placeholder="请输入手机号码" key="phone-input"/>
</template>
运行程序:
切换:
好了,是不是和我们要求的一样了呢。
另外要提的是v-show指令,该指令是改变元素的css属性display。当v-show为true时,元素会显示,为false时,元素会隐藏,dom结构中会给元素加上内联样式:display:none;.
示例:
<label v-show="true">我是v-show=true</label>
<label v-show="false">我是v-show=false</label>
运行程序:
我们查看下dom结构:
大家可以看到,确实和我们上面说的一样,当v-show值为false的时候,添加了display:none;的内联样式。
那么v-if和v-show两者都具有类似的功能,我们到底该选择使用哪个呢?
v-show只是简单的css属性切换,无论其值如何,都会被编译,相比v-show,v-if只有在条件第一次变为真的时候才开始编译。
v-if更适合条件不经常改变的场景,应为通过v-if进行切换开销比较大,当你要频繁进行显示隐藏的切换时显然v-show更加适合。
更多推荐
所有评论(0)