Vue-条件渲染和循环渲染

最新推荐文章于 2024-05-27 21:21:32 发布

H5_ljy

最新推荐文章于 2024-05-27 21:21:32 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_56973906/article/details/126614437

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

条件渲染
循环渲染

条件渲染

条件渲染指令是用来辅助开发者控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是：
v-show和v-if
v-show和v-if的区别：
v-show是通过动态的为元素添加或移除display：none来进行显示与隐藏。如果需要频繁切换元素的显示状态，用v-show性能会更好。
v-if是通过动态的创建或移除元素来实现元素的显示和隐藏。如果不需要频繁切换元素的显示状态，用v-if性能会更好。
v-if配套的指令：
v-else-if 跟else if使用差不多
v-else 跟else使用差不多

    <script src='https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
</head>
<style>
    .div1 {
        width: 200px;
        cursor: pointer;
    }
</style>
<body>
    <div class="myH">
        <div class="div1" @click="fn">
            <p>点我展示下拉框</p>
        </div>
        <div class="div1" v-show="flag">
            <p>下拉框一</p>
            <p>下拉框一</p>
        </div>
        <div class="div1" v-if="age<18">
            <span>
            未年人
            </span>
        </div>
        <div v-else-if="age>=18">
            <span>
                成年人
            </span>
        </div>
    </div>
    <script>
        var vue = new Vue({
            el: ".myH",
            data: {
                flag: false,
                age:22
            },
            methods: {
                fn() {
                    this.flag = !this.flag
                },
            }
        })
    </script>

请添加图片描述

循环渲染

1.v-for循环普通数组:v-for=“(em,index) in arr1”
2.v-for循环对象数组:v-for=“(em,index) in arr2”
3.v-for迭代对象:v-for=“(em, index) in arr3”
4.v-for迭代数字:v-for=“count in 10”

<style>
.div1{
    display: inline-block;
}
</style>

<body>
    <div class="myH">
        <!--v-for循环普通数组-->
        <div  v-for="(em, index) in arr1" :key="index" class="div1" style="background-color: royalblue;">
            <p>{{em}}</p>
        </div>

        <!--v-for循环对象数组-->
        <div  v-for="(em, index) in arr2" :key="index" class="div1" style="background-color: aqua;">
            <p>{{em.name}}
               {{em.age}}
               {{em.like}}
            </p>
        </div>

        <!-- v-for迭代对象 -->
        <div v-for="(em, index) in arr3" :key="index" class="div1" style="background-color: rgb(7, 146, 146);">
           {{em}}
        </div>

        <!--v-for迭代数字； in 后面我们放过数组、对象数组、对象，还可以放数字-->
        <!-- 如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
        <div style="background-color: rgb(185, 218, 218);">
         <p v-for="count in 10" class="div1">第{{count}}次</p>
        </div>
    </div>
    <script>
        var vue = new Vue({
            el: ".myH",
            data: {
                arr1: [5,4,3,2,1],
                arr2: [{name: "ljy",age: 21,like: "健身"}, 
                      {name: "jack",age: 11,like: "游泳"}, 
                      {name: "mary",age: 25,like: "爬山"}, 
                      {name: "Arali",age: 33,like: "美食"
                }],
                arr3:{
                    name: "jack", age: 11, like: "游泳"
                }
            },
        })
    </script>

在这里插入图片描述

v-for中key的意义
vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用;这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来。

    <div id="app">
        <h1>活动:从10件商品中选择5件商品作为奖励</h1>
        <button type="button" @click="add">加载新的商品</button>
        <button>提交</button>
        <div>
            <div v-for=" (item,index) in arr" :key="item.id">
                <input type="checkbox" name="goods" />
                {{item.name}}
            </div>
        </div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                arr: [
                    { id: 10001, name: "商品1", },
                    { id: 10002, name: "商品2", },
                    { id: 10003, name: "商品3", },
                    { id: 10004, name: "商品4", }
                ],
                count: 5
            },
            methods: {
                add() {
                    //网络请求 然后把新商品添加到arr中
                    //假装网络请求了新数据	
                    var result = this.count++
                    this.arr.unshift({ id: result, name: "商品" + result})
                }
            }
        })
    </script>

在这里插入图片描述

for和if同一个标签bug：
当for和if放在了同一个标签中没有先后顺序的要求,但是先执行for
渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染
这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染

解决方案把for弄到最外层
如果if和for套在一层,数据容器发生变化时,if会重新判断一遍
嵌套的写法数据容器变化时 if只判断新增的数据
这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率

这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中
解决方案:wx采用的是block元素 vue呢? template 其实就是dom操作中的fragment

H5_ljy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue-条件渲染和循环渲染

v-if是通过动态的创建或移除元素来实现元素的显示和隐藏。这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染。渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染。1.v-for循环普通数组:v-for=“(em,index) in arr1”2.v-for循环对象数组:v-for=“(em,index) in arr2”3.v-for迭代对象:v-for=“(em, index) in arr3”...
复制链接

扫一扫