vue中关于计算属性computed以及其中get、set的理解

在重学vue后,了解到这个计算属性,理解了一点点,但是又无法想到什么时候能用到

------------计算属性是基于它们的响应式依赖进行缓存的------------

get是基于其他的数据来获取到computed里定义的那个数据

set是根据computed里定义的那个数据来改变其他的数据

暂时就理解了这些,理解到新的会更改的,下面给个案例,关于全选的

<html>
<head>
<title>vue5 全选</title>
</head>
<style>
    
</style>

<body>
    <div id="app">
        <ul>
            <li ><span><input type="checkbox" v-model="allcheck"/></span>全选</li><br/>
            <li v-for="item in datalist"><span><input type="checkbox" v-model="item.status"/></span>{{item.xueli}}</li><br/>
            

        </ul>
        <input type="button" value="批量操作" />
    </div>
        
</body>
<script src="vue.js"></script>
<script src="axios.min.js"></script>


<script>
    var datalist=[
    {id:1,xueli:'小学',status:false},
    {id:2,xueli:'初中',status:false},
    {id:3,xueli:'高中',status:false},
    {id:4,xueli:'大学',status:true}
    ];
    var vm=new Vue({
        el:"#app",
        data:{        
            
              datalist:datalist
           
        },
        computed:{
            allcheck:{
            get:function(){
            var newarr=[];
            newarr=this.datalist.filter(function(item){
            return !item.status;
            });
            if(newarr.length==0){
            return true;
            }
            },
            set:function(value){
            this.datalist.forEach(function(item){item.status=value});
            }
            }
        }
        
    });
</script>
</html>

猜你喜欢

转载自www.cnblogs.com/jcydd/p/11431787.html
今日推荐