1、v-if
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<div id="app">
<h1 v-if="ok">Yes</h1>
</div>
这里的ok为true,yes才能被渲染
var vm = new Vue({
el:"#app",
data:{
ok:true
},
})
运行结果:
若把ok:true
改为ok:false
,则Yes不会在页面上显示出来
2、 在template元素上使用 v-if 条件渲染分组
**因为 v-if
是一个指令,所以必须将它添加到一个元素上。**但是如果想切换多个元素呢?此时可以把一个 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 元素。
<template v-if="ok">
<div>hello</div>
<div>wrold</div>
<div>nice to meet you</div>
</template>
var vm = new Vue({
el: '#app',
data:{
ok:true
}
});
3、v-else
<div id="app">
<h1 v-if="grade>=90">优秀</h1>
<h1 v-if