Vue.js中实现条件判断的可以使用以下4个指令,它们分别是
Male
Female
Age:{{age}}
Name:{{name}}
var vm= new Vue({
el:"#example",
data:{
male:true,
female: false,
age:29,
name:'clone'
}
})
运行结果如下;
由运行结果可以看出,只有当v-if后面的表达式值为true时,对应的值才会显示在页面上。也就是说v-if指令只渲染他身后表达式为true的元素。这样我们就会看出它的不足之处,那表达式为false的元素,该如何渲染呢?此时就需要v-show指令。v-show指令会渲染他身后表达式为false的元素。这样的元素上会添加css代码:style="display:none"; 将上面v-if的实例代码改为v-show,页面渲染效果为:
v-show与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none";