在vue中将v-for循环出来的复选框如何实现单选、多选、全选,以及如何将复选框的样式由默认样式改为圆形

目录

初始状态: 

实现改变复选框样式(改为圆形)

实现代码: 

 点击复选框实现多选、全选

实现代码:


初始状态: 

<template>
  <div>
    <van-grid :border="false" :column-num="2">

      <van-grid-item v-for="(i,inx) in List" :key="inx">
        <div>
          <input type="checkbox">
        </div>
        <van-image :src=List[inx].imageSrc />
      </van-grid-item>
    </van-grid>

    <div>
      <input type="checkbox">
      <lable>全选</lable>
    </div>

  </div>
</template>

<script>
export default {
  name:"collect01",
  data(){
    return{
    List:[
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-1.jpg"},
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-2.jpg"},
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-3.jpg"},
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-4.jpg"},
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-5.jpg"}
      ]
    }
  },
  methods:{

  }
}

</script>

<style scoped>

</style>

实现改变复选框样式(改为圆形)

实现代码: 

<template>
  <div>
    <van-grid :border="false" :column-num="2">

      <van-grid-item v-for="(i,inx) in List" :key="inx">
        <div class="boxs">
          <input type="checkbox" class="radius">
        </div>
        <van-image :src=List[inx].imageSrc />
      </van-grid-item>
    </van-grid>

    <div style="position: relative">
      <input type="checkbox" class="radius">
      <lable>全选</lable>
    </div>

  </div>
</template>

<script>
export default {
  name: "collect01",
  data() {
    return {
      List: [
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-1.jpg"},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-2.jpg"},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-3.jpg"},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-4.jpg"},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-5.jpg"}
      ]
    }
  },
  methods: {}
}

</script>

<style scoped>
.boxs {
  position: absolute;
  top: 5px;
  left: 10px;
  z-index: 10;
}

.radius:checked {
  background:#1673ff
}
.radius {
  width:20px;
  height:20px;
  border:solid 1px grey;
  -webkit-border-radius:50%;
  border-radius:50%;
  font-size:0.8rem;
  -webkit-appearance:none;
}
/*被选中时添加一个对勾图标*/
.radius:checked::after {
  content:'';
  top:5px;
  left:5px;
  position:absolute;
  border:#fff solid 2px;
  border-top:none;
  border-right:none;
  height:6px;
  width:10px;
  /*逆时针旋转45°*/
  transform:rotate(-45deg);
}
</style>

 点击复选框实现多选、全选

  methods: {

    selectAll() {
      if (this.allSelected) {
        this.selectedItems = this.List.map((item) => item.id);
      } else {
        this.selectedItems = [];
      }
    },
    selectItem() {
      if (this.selectedItems.length === this.List.length) {
        this.allSelected = true;
      } else {
        this.allSelected = false;
      }
      console.log(this.selectedItems)
    }
  }

实现代码:

<template>
  <div>
    <van-grid :border="false" :column-num="2">

      <van-grid-item v-for="(i,inx) in List" :key="inx">
        <div class="boxs">
          <input type="checkbox" class="radius" :value="i.id" v-model="selectedItems" @change="selectItem">
        </div>
        <van-image :src=i.imageSrc />
      </van-grid-item>
    </van-grid>

    <div style="position: relative">
      <input type="checkbox" class="radius" @change="selectAll" v-model="allSelected">
      <lable>全选</lable>
    </div>

  </div>
</template>

<script>
export default {
  name: "collect01",
  data() {
    return {
      List: [
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-1.jpg",id:1},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-2.jpg",id:2},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-3.jpg",id:3},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-4.jpg",id:4},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-5.jpg",id:5}
      ],
      selectedItems: [],
      allSelected: false,
    }
  },
  methods: {

    selectAll() {
      if (this.allSelected) {
        this.selectedItems = this.List.map((item) => item.id);
      } else {
        this.selectedItems = [];
      }
    },
    selectItem() {
      if (this.selectedItems.length === this.List.length) {
        this.allSelected = true;
      } else {
        this.allSelected = false;
      }
      console.log(this.selectedItems)
    }
  }
}

</script>

<style scoped>
.boxs {
  position: absolute;
  top: 5px;
  left: 10px;
  z-index: 10;
}

.radius:checked {
  background:#1673ff
}
.radius {
  width:20px;
  height:20px;
  border:solid 1px grey;
  -webkit-border-radius:50%;
  border-radius:50%;
  font-size:0.8rem;
  -webkit-appearance:none;
}
/*被选中时添加一个对勾图标*/
.radius:checked::after {
  content:'';
  top:5px;
  left:5px;
  position:absolute;
  border:#fff solid 2px;
  border-top:none;
  border-right:none;
  height:6px;
  width:10px;
  /*逆时针旋转45°*/
  transform:rotate(-45deg);
}
</style>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,可以使用v-for指令绑定多组复选框单选框。下面分别介绍如何绑定多组复选框单选框。 1. 绑定多组复选框 ```html <template> <div> <div v-for="item in items" :key="item.id"> <input type="checkbox" :id="item.id" :value="item.value" v-model="checkedItems"> <label :for="item.id">{{ item.label }}</label> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, value: 'apple', label: '苹果' }, { id: 2, value: 'banana', label: '香蕉' }, { id: 3, value: 'orange', label: '橙子' } ], checkedItems: [] } } } </script> ``` 上述代码中使用v-for指令遍历items数组,生成多组复选框。使用v-model指令将复选框的选中状态与checkedItems数组绑定,checkedItems数组会根据选中的复选框动态更新。 2. 绑定多组单选框 ```html <template> <div> <div v-for="item in items" :key="item.id"> <input type="radio" :id="item.id" :value="item.value" v-model="selectedItem"> <label :for="item.id">{{ item.label }}</label> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, value: 'apple', label: '苹果' }, { id: 2, value: 'banana', label: '香蕉' }, { id: 3, value: 'orange', label: '橙子' } ], selectedItem: '' } } } </script> ``` 上述代码中使用v-for指令遍历items数组,生成多组单选框。使用v-model指令将单选框的选中状态与selectedItem变量绑定,selectedItem变量会根据选中的单选框动态更新。请注意,单选框的name属性应该相同,这样才能实现单选的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值