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

// 关于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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值