}
}
})
**页面效果**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200428210011742.jpg)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200428210019395.jpg)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200428210027515.jpg)
**我们现在来看一下通过computed计算属性如何完成上述功能**
我们上述代码的功能里边的getUsers这个函数,实际上需要放在computer里边去写
data: {
users,
gender:""
},
computed: {
showUser:{
// 当showUser这个数据被获取是,触发
get(){
if(this.gender === ""){
return this.users
}else{
return this.users.filter(user => user.gender === this.gender);
}
}
},
}
data 与 computed 的区别
1. data:存储这没有经过计算的数据
2. computed: 依赖于data中的数据, 存储着 被计算过的数据 以及计算的过程, 如果数据需要被二次或者多次处理,就属于计算属性
计算得到的数据
1. computed是一个对象,里面存放是属性。类似data,而不是methods,所以统称为计算属性
2. 里面的属性可以像 data 里面存放的数据一去使用
3. 这些属性的值是通过运算得到的
4. 它的结构类似(defineProperty),getter/setter
5. 计算属性的值同时还会根据它所依赖的数据的变化 而自动变化
现在我们通过新需求来了解到computed的set方法
<div id="app">
<div>
<button :class="{active:gender===''}" @click="gender = ''">全部</button>
<button :class="{active:gender==='男'}" @click="gender = '男'">男</button>
<button :class="{active:gender==='女'}" @click="gender = '女'">女</button>
</div>
<span> {{gender}} </span>
<hr>
<ul>
<li v-for="user of showUser">
<input type="checkbox" v-model="user.checked">
{{user.username}}
</li>
</ul>
<!--
v-model : 代替标签自身的事件,不同的标签触发的事件不同
input : onchange
-->
<input type="checkbox" v-model="checkAll"/> 全选
</div>
我们在每条li内部加上一个inout框
并且添加一个全选按钮
全选
...
data: {
users,
gender:“”,
checkAll:false
},
需求:
1. 所有li里边的多选框被选中后,全选就被选中。
2. 全选被选中时,所有li里边的多选框也要被选中
那我们就可以吧checkAll理解为一个计算属性,那我们就把它放在computed里边
checkAll:{
get(){
// every() 遍历制定目标的所有内容,一假即假
return this.users.every(user => user.checked)
},
set(newval){
return this.users.forEach(user => {
user.checked = newval
});
}
}
现在处理一下数据,给每个数据加一个checked的属性
let users = [
{ id: 1, username: 'baogege', gender: '男' ,checked:false},
{ id: 2, username: 'mt', gender: '男' ,checked:false},
{ id: 3, username: 'haigege', gender: '男' ,checked:false},
{ id: 4, username: 'zMouse', gender: '男' ,checked:false},
{ id: 5, username: 'reci', gender: '女' ,checked:false},
{ id: 6, username: 'lisi', gender: '女' ,checked:false}
]
…
-
<input type="checkbox" v-model="user.checked"> {{user.username}}
这样我们就实现了上述新需求 computed:计算属性的值,在依赖数据未发生改变时/或者没有依赖数据,自动缓存到应用中,下次获取时不重新计算 我们通过一个页面效果来看
<div id="app"> <p v-if="showDate"> {{getNow()}} </p> <button @click="showDate = !showDate">点我</button> <p v-if="showDate"> {{now}} </p> </div> <script> let app = new Vue({ el:"#app", data:{ showDate:true }, methods: { getNow(){ return Date.now(); } }, computed: { // now:{ // get(){ // return Date.now(); // } // }, // 如果某个计算属性只需要处理get(),那么可以简写 now(){ return Date.now(); }, }, }) </script>
直接打开浏览器的反馈 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200428220405621.jpg) 点击按钮删除标签后重新创建加载到页面后 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020042822043974.jpg) 可以看出第二个是没有任何变化的 这也就证明了:computed在依赖数据未发生改变时/或者没有依赖数据,自动缓存到应用中,下次获取时不重新计算 []( )watch =============================================================== 上述代码我们可以看出computed的惰性很大的,他不会主动监听你,但是watch是比较积极的,会去主动监听你。 我们下边就通过代码来看一下
<div id="app"> <input type="text" v-model.lazy="keyword"> <ul> <li v-for="user of showUsers"> {{user.username}} </li> </ul> </div> <script> let users = [ { id: 1, username: 'baogege', gender: '男', checked: false }, { id: 2, username: 'mt', gender: '男', checked: false }, { id: 3, username: 'haigege', gender: '男', checked: false }, { id: 4, username: 'zMouse', gender: '男', checked: false }, { id: 5, username: 'reci', gender: '女', checked: false }, { id: 6, username: 'lisi', gender: '女', checked: false } ] let app = new Vue({ el:"#app", data: { keyword:"", users, showUsers:[] }, watch: { keyword(){ // includes(指定的内容):查找是否包含指定的值 this.showUsers = this.users.filter(user => user.username.includes(this.keyword)) // setTimeout(()=>{ // this.showUsers = this.users.filter(user => user.username.includes(this.keyword)) // },1000) } }, }) </script>
现在页面上来之后是没有数据的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200428221126835.jpg) 但是在input框输入一个就会有对应的数据 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200428221715169.jpg) 我们也可以通过定时器来延迟拿到数据 总结上边我们可以看出 # 最后 **自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。** **深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。** **因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。** ![img](https://img-blog.csdnimg.cn/img_convert/cc79e79eccf6f8a735a4e65f3747a792.jpeg) ![](https://img-blog.csdnimg.cn/img_convert/39f45ea375d89efda6507ef537389004.png) ![](https://img-blog.csdnimg.cn/img_convert/77fa1594ab23dad6aea580a808730cd6.png) **既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!** [**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!**](https://bbs.csdn.net/topics/618191877) **由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!** **因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。** [外链图片转存中...(img-pvxrWZuV-1715702876808)] [外链图片转存中...(img-8QkfKlLc-1715702876809)] [外链图片转存中...(img-xALBIOwS-1715702876809)] **既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!** [**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!**](https://bbs.csdn.net/topics/618191877) **由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!**