【uniapp】多选标签

 

 

<view class="result">
	<text>已选注肥通道:</text>
	<view class="box" v-for="item in result">
		<text>{{item}}</text>
	</view>
</view>
<view class="card3">
	<view class="box1" v-for="(item,index) in list" :key="index">  
		<text>{{item.name}}</text>
		<label class="check1" @click="passageway(index)">
			<checkbox/>{{item.selected?item.value:item.value}}
		</label>
	</view>
</view>

<script>
   export default{
      data(){
        return{
            list:[{name:'酸,通道',value:'酸',selected:false},{name:'A,通            
            道',value:'A',selected:false},{name:'B,通道',value:'B',selected:false}],
            result:[],
	        selectId: []
        }   
      },
      method:{
         passageway(index){
				if (this.list[index].selected == true) {
					this.list[index].selected = false;
					//取消选中时删除数组中的值
					for (var i = 0; i < this.selectId.length; i++) {
						if (this.selectId[i] === this.list[index].value) {
							this.selectId.splice(i, 1);
						}
					}
					this.result=this.selectId
				} else {
					this.list[index].selected = true;
					this.selectId.push(this.list[index].value)
					this.result=this.selectId
				}
		}
      }
   }
</script>