面试被问到v-if和v-for同时使用优先级的问题

最新推荐文章于 2023-07-30 20:59:53 发布

liaobaofeng

最新推荐文章于 2023-07-30 20:59:53 发布

阅读量1.5k

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/liaobaofeng/article/details/107030469

版权

// 关于vue中v-if 与v-show 和v-for的提问
// v-for和v-if的优先级，v-for的要高，为什么我看不懂源码，看了官方文档，只知道最好不要放一起使用
// 因为优先级高的问题，即便满足了v-if条件的被隐藏了。其实v-for也将数据渲染到dom了，如果数据多重绘dom
// 也是影响性能吧。用了个计算属性，其实就是过滤满足条件的数据（我面试的时候直接说的js逻辑处理，将满足条件数据
// 筛选下来，再渲染，面试没说用computed他觉得我low，哈哈，作为小白确实low）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

        <div class="box"  >
            <ul v-if="" >
                
                <li v-for='item in data2' :key='item.id'>{{item.name}}</li>
                
            </ul>
        </div>

    </div>
</body>
<script src="./vue-2.4.0.js"></script>


<script>
    let vm=new Vue({
        el:'#app',
        data:{
            data1:[
                {'id':1,'name':'liao','age':25,'show':true},
                {'id':2,'name':'bao','age':13,'show':false},
                {'id':3,'name':'feng','age':15,'show':true},
                {'id':4,'name':'hong','age':17,'show':false}
            ]
        },  
        computed: {
        //其实就是过滤出满足条件后的数据再渲染
            data2:function(){
               return this.data1.filter(function(value){
                return value.show
            })
            }
        },


    });

</script>


</html>