Vue中v-if v-else-if v-else(Vue笔记:二)
v-if控制元素是否被创建:
用法
:v-if="boolean"参数
:可以为任意js数据,隐式转化为布尔值布尔类型后为false或truefalse
:不创建元素,用html注释代替true
:创建元素
<div id="app">
<!-- v-if="true"才添加h1标签 v-if="flase"就没有h1标签用注释代替 -->
<!-- if -->
<h1 v-if="flag">如果是true显示</h1> //不创建元素
<!-- if else -->
<h1 v-if="flag1">hello word</h1> //创建元素
<h1 v-else>word hello</h1> // 如果上面if为false则创建这个元素
<!-- if elseif elseif else -->
<h1 v-if="flag2===1">1</h1> // 不创建元素
<h2 v-else-if="flag2===2">2</h2> // 不创建元素
<h3 v-else-if="flag2===3">3</h3> // 创建元素
<h4 v-else-if="flag2===4">4</h4> // 不创建元素
<h5 v-else>5</h5> // 不创建元素
</div>
<script>
let app = new Vue({
el: '#app',
data: {
flag: false,
flag1: true,
flag2: 3,
}
})
</script>
不清楚隐式转化为布尔值的可以点击:JavaScript数据类型的隐式转换
(Vue笔记:二 date:2021-03-05)