[Vue]条件渲染

  1.v-if
    写法:
        (1) v-if="表达式"
        (2) v-else-if="表达式"
        (3) v-else="表达式"
    适用于:切换频率较低的场景。
    特点: 不展示的DOM元素直接被移除。
    注意: v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。
  2.v-show
    写法:  v-show="表达式"
    适用于: 切换频率较高的场景。
    特点: 不展示的DOM元素未被移除，仅仅是display:none 。
  3.备注: 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
          template能配合v-if使用，不能配合v-show使用。
<body>
    <div id="root">
        <h2>当前的n值是: {{n}}</h2>
        <button @click="n++">点我n+1</button>

        <!-- 使用v-show -->
        <div v-show='false'>你好1</div>
        <div v-show='1===1'>你好2</div>

        <!-- 使用v-if，中途不能被打断，v-else写的条件都无效 -->
        <div v-if="n===1">Vue</div>
        <div v-else-if="n===2">React</div>
        <div v-else-if="n===3">Angular</div>
        <div v-else="n===2">？？？</div>

        <!-- template可以配合v-if使用，不能配合v-show使用 -->
        <template v-if="n===1">
            <div>你</div>
            <div>好</div>
            <div>吗</div>
        </template>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#root",
        data: {
            n: 0,
            name: '条件渲染',
        },
    })
</script>

 

posted @ 2023-10-27 08:57  夕苜19  阅读(3)  评论(0)  编辑  收藏  举报