vue中關於計算屬性computed以及其中get、set的理解

本文轉載自查看原文 2019-08-29 20:19 4696 vue/ javascript

在重學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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue計算屬性computed中的get和set的使用 computed計算屬性（get和set） vue中computed（計算屬性） Vue Computed中get 和set講解 Vue中computed的set和get方法 vue的計算屬性get和set 深入理解 Vue Computed 計算屬性 vue computed用法（get/set） vue 中 computed 計算屬性的用法 vue中computed計算屬性傳入參數