条件渲染v-if和v-show

1900's 88 keys

于 2022-03-19 18:21:27 发布

阅读量547

点赞数 1

分类专栏： # Vue 正在路上的前端攻城狮的烂笔记文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45660621/article/details/123599624

版权

正在路上的前端攻城狮的烂笔记同时被 2 个专栏收录

90 篇文章

订阅专栏

Vue

2 篇文章

订阅专栏

本文详细介绍了Vue.js中v-if和v-show指令的使用，包括它们的语法、适用场景及特点。v-if适合于切换频率低的情况，会移除不展示的DOM元素，而v-show则在切换频繁时更合适，它不会移除DOM，仅通过CSS隐藏。通过示例代码展示了v-if和v-show在条件渲染中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

条件渲染：

v-if:

写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
适用于：切换评率较低的场景
特点：不展示的DOM元素直接被移除
注意： v-if可以和： v-else、v-else一起使用，但要求结构不能被“打断”

    <div id="root">
        <!-- 使用v-if做条件渲染 -->
        <button @click="n++">点我n+1 </button>
        <span>{{n}}</span>
        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else="n === 3">欢迎您</div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                name: "Vue",
                n: 0
            }
        });
    </script>

在这里插入图片描述



    <div id="root">
        <!-- 使用v-if做条件渲染 -->

        <!-- 结合template使用 -->
        <template v-if="n === 1"> 
            <h2>您好</h2>
            <h2>您好</h2>
            <h2>您好</h2>
        </template>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                name: "Vue",
                n: 0
            }
        });
    </script>

在这里插入图片描述

v-show

写法： v-show=“表达式”
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

 <div id="root">
     <!-- 使用v-show做条件渲染 -->
     <h2 v-show="false">欢迎来到{{name}}</h2>
     <h2 v-show="1 === 1">欢迎来到{{name}}</h2>
 </div>
 <script>
     Vue.config.productionTip = false;
     const vm = new Vue({
         el: "#root",
         data: {
             name: "Vue",

         }
     });
</script>