VUE 单选,多选,全选

单选

<template>
  <div id="messageremind" style="margin: 10%">
    <div v-for="(item, index) in list" :key="index">
      {{ item.text }}
      <img
        :src="
          flag == index
            ? require('../../assets/workOrder/kexuanzheng.png')
            : require('../../assets/workOrder/nokexuanzheng.png')
        "
        @click="btnimg(index)"
        alt
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { index: 1, text: "单选1" },
        { index: 2, text: "单选2" },
        { index: 3, text: "单选3" },
        { index: 4, text: "单选4" },
        { index: 5, text: "单选5" },
        { index: 6, text: "单选6" },
      ],
      flag: -1,
    };
  },
  methods: {
    btnimg(index) {
      if (this.flag == index) {
        //  已经点击过
        this.flag = -1;
      } else {
        //  未点击过
        this.flag = index;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

 

效果如下:

多选:

<template>
  <div id="messageremind" style="margin:10%">
    <div v-for="(item, index) in list" :key="index">
      {{ item.text }}
      <img
        :src="
         item.isCheckde
            ? require('../../assets/workOrder/kexuanzheng.png')
            : require('../../assets/workOrder/nokexuanzheng.png')
        "
        @click="btnimg(index)"
        alt
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { index: 1, text: "多选1" },
        { index: 2, text: "多选2" },
        { index: 3, text: "多选3" },
        { index: 4, text: "多选4" },
        { index: 5, text: "多选5" },
        { index: 6, text: "多选6" },
      ],
      flag: -1,
    };
  },
  methods: {
    btnimg(index) {
    this.list[index].isCheckde =!this.list[index].isCheckde
    },
  },
  created() {
    this.list.forEach((item) => {
      this.$set(item, "isCheckde", false);
    });
  },
};
</script>
<style lang="scss" scoped>
</style>

效果如下:

全选和取消全选:

<template>
  <div id="messageremind" style="margin: 10%">
    <div>
      <input
        type="checkbox"
        v-model="checkbox"
        class="all"
        @click="checkboxall"
      />全选
    </div>
    <div v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="arr" class="all" :value="item.index" />{{
        item.text
      }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { index: 1, text: "多选1" },
        { index: 2, text: "多选2" },
        { index: 3, text: "多选3" },
        { index: 4, text: "多选4" },
        { index: 5, text: "多选5" },
        { index: 6, text: "多选6" },
      ],
      flag: -1,
      checkbox: false,
      arr: [],
    };
  },
  methods: {
    checkboxall() {
      if (this.checkbox) {
        this.arr = [];
      } else {
        for (let i = 0; i < this.list.length; i++) {
          this.arr.push(this.list[i].index);
          console.log(this.arr);
        }
      }
    },
  },
  watch: {
    //深度 watcher
    arr: {
      handler: function (val, oldVal) {
        if (this.arr.length === this.list.length) {
          console.log(9);
          this.checkbox = true;
        } else {
          console.log(8);
          this.checkbox = false;
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.all {
  width: 15px;
  height: 15px;
  margin-bottom: 20px;
}
</style>

样式凑合看~

​​​

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值