vue三种方式实现：全选、反选、全不选

方法一：v-model 与 [{checked:true},…]<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport&

CC_Amber

24724人浏览 · 2019-01-01 13:20:24

CC_Amber · 2019-01-01 13:20:24 发布

方法一：v-model 与 [{checked:true},…]

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="checkAnti">反选</button>
    <button @click="checkAll">全选</button>
    <button @click="checkNone">全不选</button>

    喜好:
    <div v-for="item in inputArr">
      {{item.text}} : <input type="checkbox" value="" v-model="item.checked">
    </div>

  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: function () {
      return {
        inputArr: [
          { text: '足球', checked: true },
          { text: '篮球', checked: false },
          { text: '羽毛球', checked: false },
          { text: '游泳', checked: false },
        ],
      }
    },
    methods: {
      checkNone() {
        this.inputArr.forEach(item => {
          item.checked = false;
        });
      },
      checkAll() {
        this.inputArr.forEach(item => {
          item.checked = true;
        });
      },
      checkAnti() {
        this.inputArr.forEach(item => {
          item.checked = !item.checked;
        });
      }
    }
  })
</script>

</html>

方法二: v-model结合v-for,遍历[true,false,…]

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="checkAnti">反选</button>
    <button @click="checkAll">全选</button>
    <button @click="checkNone">全不选</button>

    喜好:
    <div v-for="(item,idx) in checkArr">
      <input type="checkbox" value="" :checked="checkArr[idx]">
    </div>

  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: function () {
      return {
        checkArr: [true, false, false, false],
      }
    },
    methods: {
      checkNone() {
        this.checkArr = this.checkArr.map(item => item = false);
        
        // ps:this.checkArr.forEach(item => item = false);无效,求大神解答~
      },
      checkAll() {
        this.checkArr = this.checkArr.map(item => item = true);
      },
      checkAnti() {
        this.checkArr = this.checkArr.map(item => item = !item);
      }
    }
  })
</script>

</html>

方法三.利用复选框checked属性

ps:分别绑定两种数据结构,都可以实现哦

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="checkAnti">反选</button>
    <button @click="checkAll">全选</button>
    <button @click="checkNone">全不选</button>

    喜好:
   
    <!-- <div v-for="(item,idx) in checkArr">
      <input type="checkbox" value="" :checked="checkArr[idx]">
    </div> -->

    <div v-for="(item,idx) in inputArr">
      <input type="checkbox" value="" :checked="item.checked">
    </div>

  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: function () {
      return {
        inputArr: [
          { text: '足球', checked: true },
          { text: '篮球', checked: false },
          { text: '羽毛球', checked: false },
          { text: '游泳', checked: false },
        ],

        // checkArr: [true, false, false, false],
      }
    },
    methods: {
      checkNone() {
        this.inputArr.forEach(item => {
          item.checked = false;
        });

        // this.checkArr = this.checkArr.map(item => item = false); 
      },
      checkAll() {
        this.inputArr.forEach(item => {
          item.checked = true;
        });

        // this.checkArr = this.checkArr.map(item => item = true); 
      },
      checkAnti() {
        this.inputArr.forEach(item => {
          item.checked = !item.checked;
        });

        // this.checkArr = this.checkArr.map(item => item = !item); 
      }
    }
  })

</script>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^