VUE中的全选和反选以及点击高亮

最新推荐文章于 2021-12-02 17:04:07 发布

禊月生人

最新推荐文章于 2021-12-02 17:04:07 发布

阅读量262

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/TimEsAme/article/details/121041008

版权

本文介绍了在Vue.js中实现全选和反选功能的方法，利用计算属性computed进行处理。当需要更新计算属性绑定的值时，会触发set方法，从而完成数据的双向绑定操作。

摘要由CSDN通过智能技术生成

全选和反选

使用vue的计算属性computed实现:

当要给绑定计算属性的标签赋值时,会触发计算属性的set方法,这时候就需要使用计算属性的完整写法:

//......省略html
<input class="toggle" type="checkbox" v-model="e.isDone" />
// 小复选框要绑定数据中的布尔值,数据中没有跟后台沟通一下

<script>
export default {
// ......省略其他代码
props: [{id: 100, name: "金长剑", isDone: false},
        {id: 101, name: "金甲", isDone: false},
        {id: 102, name: "凤凰羽", isDone: false},
        {id: 103, name: "吃鸡!", isDone: false}],
  
}
</script>

<template>
  <header class="header">
    <!-- 省略html-->
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
  </header>
</template>

<script>
export default {

//.....省略其他代码

  computed: {
    isAll: {
      set(a) {
  //因为使用的v-model双向数