vue中v-if,v-show与v-for指令

最新推荐文章于 2023-07-13 01:51:17 发布

原创最新推荐文章于 2023-07-13 01:51:17 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue.js中的三种核心指令：v-if、v-show 和 v-for。通过实例对比了v-if和v-show在DOM操作上的不同之处，以及如何利用v-for进行数据循环展示，并强调了使用:key的重要性。

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

v-if 控制dom存在与否

v-show 控制dom显示与否

v-for 控制一组数据，循环显示
先说下v-if：

这里实现了一个小功能，用按钮来隐藏和显示hello world

当v-if后面的值为true时，会显示该div，否则不显示。

v-if隐藏元素时，会把元素从dom树删掉
v-show

v-show隐藏元素时会给元素加一个样式display:none。

如果显示隐藏频率高，则行行选择用v-show效率会高，如果频率很低，则可以用v-if。

v-if与v-show区别

v-if：控制DOM的存在与否，直接创建、删除DOM元素;

v-show:控制DOM的显示与否，只给DOM元素增加、去掉display:none的样式


    <body>
    	<div id="root">
            <div v-if="show">hello world</div>
            <button @click="handleClick">变换</button>
    	</div>
    </body>

<script>
	new Vue ({
        el:"#root",
        data(){
            show:true
        },
        methods:{
            handleClick:function(){
                this.show =!this.show;
            }
        }
	})
</script>

v-for

<body>
    <div id="root">
        <ul>
            <li v-for="(item,key) of list" :key="key">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#root",
            data(){
                list:[1,2,3]
            }
        })
    </script>
</body>

使用v-for时加:key=""（每个循环中每一项key值都要唯一）的属性，会提升每一项渲染的性能。

上面代码是将list中内容，放在item中循环显示。

"item of list"可以写成"item in list"