Vue和小程序中制作单选、多选点击变色教程

原创 黄良钵  2017-12-12 22:58  阅读 527 次 评论 0 条

Vue或者小程序中经常用到单选或者多选点击变色的事件,Vue和小程序都是数据for遍历出来的,不能和普通那样设置点击事件更改样式,按照之前那样会全部都变色了。

在Vue或小程序中利用元素的id的不同来判断给哪个添加样式。

Vue中制作单选、多选点击变色教程

在Vue中

  1. <div id="app">
  2.         <h1>Vue中制作单选、多选点击变色教程</h1>
  3.         <h2>原文地址:<a href="https://xn--nf1a578axkh.xn--fiqs8s/rOdt5">https://xn--nf1a578axkh.xn--fiqs8s/rOdt5</a></h2>
  4.         <h2>单选</h2>
  5.         <ul>
  6.             <li v-for="item in phones" :key="item.id" :class="radio == item.id ? 'bgColor':'' " @click="clickRadio(item.id)">{{item.name}}</li>
  7.             <div class="clean"></div>
  8.         </ul>
  9.         <h2>多选</h2>
  10.         <ul>
  11.             <li v-for="items in phones" :class="Checkbox.includes(items.id) ? 'bgColor':'' " @click="clickCheckbox(items.id)">{{items.name}}</li>
  12.             <div class="clean"></div>
  13.         </ul>
  14.     </div>
  15.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  16.     <script>
  17.     var app = new Vue({
  18.         el: '#app',
  19.         data: {
  20.             // 定义一个变量 用于储存id 单选只储存一个使用字符串
  21.             radio:'',
  22.             // 多选储存多个id 则使用数组
  23.             Checkbox:[],
  24.             phones:[
  25.                 {
  26.                     id:1,
  27.                     name:'华为',
  28.                 },
  29.                 {
  30.                     id:2,
  31.                     name:'荣耀',
  32.                 },
  33.                 {
  34.                     id:3,
  35.                     name:'小米',
  36.                 },
  37.                 {
  38.                     id:4,
  39.                     name:'魅族',
  40.                 },
  41.                 {
  42.                     id:5,
  43.                     name:'OPPO',
  44.                 },
  45.                 {
  46.                     id:6,
  47.                     name:'vivo',
  48.                 },
  49.             ]
  50.         },
  51.         methods:{
  52.             clickRadio:function(e){
  53.                 if(this.radio == e){
  54.                     // 如果已经点击则取消点击样式
  55.                     this.radio = ''
  56.                 }
  57.                 else{
  58.                     // 把点击的元素id放入radio中
  59.                     this.radio = e;
  60.                 }
  61.             },
  62.             clickCheckbox:function(e){
  63.                 if(this.Checkbox.includes(e)){
  64.                     this.Checkbox.splice(this.Checkbox.indexOf(e),1);
  65.                 }else{
  66.                     // 把点击的元素id放入Checkbox数组中
  67.                     this.Checkbox.push(e);
  68.                 }
  69.             }
  70.         }
  71.     })
  72.     </script>

在小程序中

在小程序中的原理也是和Vue中一样,只是设置数据的方式不一样而已,Vue中直接使用 this.radio = e ,但在小程序中则是

  1. this.setData({
  2.     radio:e
  3. })

PS: (2018-02-08) 小程序的多选不能这样做,如果点击执行请求的话,则从请求中获取状态码判断是否被选中( {{item.checkbox == 1?'bgColor':''}} );

如果没有执行请求的话,可以在预设data中的phones数组中添加状态码。

  1. <text wx:for="{{TFtips}}" id='{{item.id}}' wx:key="{{item.id}}" data-index="{{index}}" bindtap='color_green' class="{{item.checked?'bgColor':''}}">{{item.name}}</text>

data中的数组 {id:1,name:'华为',checked:false}, js中这样写:

  1. color_green:function(e){
  2.     // console.log(e.currentTarget.dataset.index)
  3.     let index = e.currentTarget.dataset.index;
  4.     let phones = this.data.phones
  5.     let that = this;
  6.     phones[index].checked = !phones[index].checked
  7.     this.setData({
  8.       phones:phones
  9.     })
  10.   },

演示demo

关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情