uniapp 充值选中其中一个 选中的为true 其余为false

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

vue

		<view   v-for="(item,index) in res_phone_list" v-bind:key="item.id" :class="[ item.selected ? 'index-content-btn' : 'index-content-btn-no']" >
      <view :class="[ item.selected ? 'index-content-btn-common' : 'index-content-btn-common-no']"   @click="selectColor(index,item)">
        <text :class="[ item.selected ? 'index-content-btn-text' : 'index-content-btn-text-no']" >{{item.name}}</text>
        <view class="index-content-btn-12">
          <text  :class="[ item.selected ? 'index-content-btn-text-bottom' : 'index-content-btn-text-bottom-no']"  >{{item.price}}</text>
        </view>
      </view>
    </view>

js

	data(){
	       return{
		   res_phone_list:[
				{
					name:'联通10G',
					price:'13元',
					id:1,
					selected:true
				},
				{
					name:'移动10G',
					price:'12元',
					id:2,
					selected:false
					
				},
				{
					name:'电信10G',
					price:'10元',
					id:3,
					selected:false
				}
			]
		   }
	}
	
	
	
   方法
   selectColor(index,item){
			for(let items in this.res_phone_list){  //这个循环的时候要用for in 来遍历 当前选中下标为true 其他的下标为false 避免多选
				console.log(items)
				this.res_phone_list[items].selected = false;
				this.res_phone_list[index].selected = true;
			
			}
		},

来源：oschina

链接：https://my.oschina.net/pingheyongfeng/blog/3148254