Vue语法基础(二)

条件渲染

v-if

写法：v-if=”表达式” v-else-if=”表达式” v-else=”表达式”

适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

v-show

写法：v-show=”表达式”

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

注意：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        
        <div id="root">
            <h2>当前的年龄值是:{{age}}</h2>
            <button @click="age++">点我年龄+1</button>
            <h1>hello，{{name}},年龄：{{age}}</h1>
            <!-- 使用v-show做条件渲染 -->
            <h2 v-show="true">欢迎你的到来:{{name}}</h2>
            
            <!-- v-else和v-else-if -->
            <div v-if="age === 4">婴儿</div>
            <div v-else-if="age === 7">儿童</div>
            <div v-else-if="age === 10">小孩</div>
        </div>
        <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:"小灰灰",
                age:4
            }
        })
        </script>
    </body>
</html>
Vue
#Vue3
Vue语法基础(二)
http://www.wangxiaohuan.com/2020/10/16/2020-10-16/
作者
吃素的左撇子
发布于
2020年10月16日
许可协议