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