1、v-if的使用
<div class='app'>
<h2 v-if='isshow'>{{message}}</h2>
</div>
<script src='../vue.js'></script>
<script>
const app = new Vue({
el: '.app',
data: {
message: '你好啊,世界!',
isshow: false
}
})
</script>
2、v-if、v-else的使用
<div class='app'>
<h2 v-if='isshow'>{{message}}</h2>
<h2 v-else='isshow'>显示我</h2>
</div>
<script src='../vue.js'></script>
<script>
const app = new Vue({
el: '.app',
data: {
message: '你好啊,世界!',
isshow: false
}
})
</script>
3、v-if、v-else、v-else-if的使用
<div class='app'>
<h2 v-if='score>=90'>优秀</h2>
<h2 v-else-if='score>=70'>良好</h2>
<h2 v-else-if='score>=60'>及格</h2>
<h2 v-else>不及格</h2>
</div>
<script src='../vue.js'></script>
<script>
const app = new Vue({
el: '.app',
data: {
message: '你好啊,世界!',
score: 90
}
})
</script>
***最后一个代码的使用,如果是判断条件复杂,还是建议写在computed属性中,然后进行调用