如何在Vue中實(shí)現(xiàn)全選/反選

如何在Vue中實(shí)現(xiàn)全選/反選？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

首先就是自己創(chuàng)建一個(gè)input，正在mx.txt的前方添加一個(gè)input：CheckBox。在v-model加上你每次創(chuàng)建出來的mx.check

最重點(diǎn)就在于forEach遍歷，出來的都是當(dāng)前的。
有些人不注意的一點(diǎn)，為什么data里面沒有check:[]這樣的出現(xiàn)。
data里的是實(shí)時(shí)監(jiān)控，你點(diǎn)一次自動將所有的check都變成了true。

<template>
 <div class="check">
 <button @click="checkAll">全選</button>
 <br>
 <input type="text" v-model="txt" @keyup.enter="ck" />
 <ul>
 <li v-for="(mx, index) in list" :key="index">
 <input type="checkbox" v-model="mx.check" /> {{mx.txt}}
 </li>
 </ul>
 </div>
</template>

<script>
 export default {
 data() {
 return {
 txt: "",
 list: []
 }
 },
 methods: {
 ck() {
 this.list.push({
  txt: this.txt,
  check: false
 })

 this.txt = ""
 },
 checkAll() {

 this.list.forEach((mx) => {
  mx.check = !mx.check
 })

 }
 }
 }
</script>

<style lang="less">
 .check {
 cursor: pointer;

 button {
 cursor: pointer;
 border: 0;
 padding: 10px 30px;
 background: #000;
 color: #fff;
 border-radius: 100px;
 margin-bottom: 10px;
 outline: none;
 }

 input {
 padding: 15px;
 width: 300px;
 border: 0;
 box-shadow: 0 0 15px #ccc;
 }

 ul {
 width: 300px;
 padding: 0;
 cursor: pointer;
 box-shadow: 0 0 15px #ccc;
 min-height: 300px;
 padding: 15px;
 list-style: none;

 li {
 cursor: pointer;
 margin-bottom: 12px;

 >input {
  padding: 0;
  width: auto;
 }
 }
 }
 }
</style>

關(guān)于如何在Vue中實(shí)現(xiàn)全選/反選問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。