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

最新推荐文章于 2024-03-09 10:31:32 发布

增伟

最新推荐文章于 2024-03-09 10:31:32 发布

阅读量372

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42645212/article/details/81207247

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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"

增伟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中v-if,v-show与v-for指令

v-if 控制dom存在与否 v-show 控制dom显示与否 v-for 控制一组数据，循环显示先说下v-if：这里实现了一个小功能，用按钮来隐藏和显示hello world 当v-if后面的值为true时，会显示该div，否则不显示。 v-if隐藏元素时，会把元素从dom树删掉 v-show v-show隐藏元素时会给元素加一个样式d...
复制链接

扫一扫