Vue中v-if v-else-if v-else(Vue笔记:二)

Vue中v-if v-else-if v-else(Vue笔记:二)

---

v-if控制元素是否被创建：

• 用法：v-if="boolean"
• 参数：可以为任意js数据，隐式转化为布尔值布尔类型后为false或true
• false：不创建元素，用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)