Vue实现全选功能

Posted 2018cd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue实现全选功能相关的知识,希望对你有一定的参考价值。

https://cn.vuejs.org/v2/guide/forms.html

<template>
  <div class="hello">
    <input type="checkbox" value="全选" style="margin-bottom:20px;" v-model="selectAll">全选
    <span @click="canCleAll">取消</span>
    <div>
      <template v-for="item of list">
        <!-- 多个复选框,绑定到同一个数组 -->
        <!-- v-model绑定到数组checkedList,当checkbox选中时,input的value值,会push到数组checkedList中 -->
        <input type="checkbox" :key="item.index" :value="item.movieUrl" v-model="checkedList" />{{item.movieName}}
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data() {
    return {
      list: [
        {
          movieName: ‘电影1‘,
          movieUrl: ‘xxxxx‘
        }, {
          movieName: ‘电影2‘,
          movieUrl: ‘xxxxx‘
        }, {
          movieName: ‘电影1‘,
          movieUrl: ‘xxxxx‘
        },
        {
          movieName: ‘电影2‘,
          movieUrl: ‘xxxxx‘
        }
      ],
      checkedList: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.checkedList.length === this.list.length
      },
      // 点击全选,取消全选是出发,选中时,value值为true,取消选中时,value值为false
      set(value) {
        if (value) {
          // 方法一 forEach遍历,push到checkedList中
          // let that = this
          // this.checkedList = []
          // this.list.forEach(item => {
          //   that.checkedList.push(item.movieUrl)
          // })
          // 方法二,map遍历
          this.checkedList = this.list.map(item => {
            return item.movieUrl
          })
          // console.log(this.checkedList)
        } else { // 取消选中。重置checkedList数据。
          this.checkedList = []
        }
      }
    }
  },
  methods: {
    canCleAll() {
      this.checkedList = []
    }
  }
}
</script>

<style scoped>
</style>

 

以上是关于Vue实现全选功能的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli实现最简单的全选全不选反选功能。不容错过呦!!!!!话不多说直接上代码。。。。

Vue的全选功能实现思路

vue.js实战——购物车练习(包含全选功能)

Vue实现全选功能

vue 实现 全选功能

vue入门------简单购物车功能实现(全选,数量加减,价格加减)