vue,uniapp,js手写单选和多选效果

灰太狼 2022-11-10 05:44 198阅读 0赞

### 单选 ###

### 您将看到以下效果 思路是给要设置的元素绑定一个值，并判断这个值是不是和我们赋予（传参）的值相同（使用uview组件 您可以尝试换成class等） ###

![单选][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]

<template>
      <view>
    	  <u-button @click="setClass(1)" :type="setClassIndex==1?'primary':'default'">设置1</u-button>
    	  <u-button @click="setClass(2)" :type="setClassIndex==2?'primary':'default'">设置2</u-button>
    	  <u-button @click="setClass(3)" :type="setClassIndex==3?'primary':'default'">设置3</u-button>
    	  <u-button @click="setClass(4)" :type="setClassIndex==4?'primary':'default'">设置4</u-button>
    	  <u-button @click="setClass(5)" :type="setClassIndex==5?'primary':'default'">设置5</u-button>
      </view>
    </template>
    <script>
    export default { 
    	name:'index',
    	data() { 
    		return { 
    			setClassIndex:1,
    		};
    	},
    	methods:{ 
    		setClass(index){ 
    			this.setClassIndex = index
    		}
    	}
    }
    </script>
    <style lang="scss">
    </style>

### 多选 ###

### 思路同单选略有不同，主要是判断我们给的值在已知列表中是否存着，不存在就添加，存着反而取消。效果如下 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center 1]

<template>
      <view>
    	  <u-button @click="setClass(1)" :type="setList.includes(1)?'primary':'default'">设置1</u-button>
    	  <u-button @click="setClass(2)" :type="setList.includes(2)?'primary':'default'">设置2</u-button>
    	  <u-button @click="setClass(3)" :type="setList.includes(3)?'primary':'default'">设置3</u-button>
    	  <u-button @click="setClass(4)" :type="setList.includes(4)?'primary':'default'">设置4</u-button>
    	  <u-button @click="setClass(5)" :type="setList.includes(5)?'primary':'default'">设置5</u-button>
      </view>
    </template>
    <script>
    export default { 
    	name:'index',
    	data() { 
    		return { 
    			setList:[],
    		};
    	},
    	methods:{ 
    		setClass(index){ 
    			if(this.setList.includes(index)){  //es6 判断是否包含
    				this.setList=this.setList.filter(function (item){ return item !== index;});
    			}else{ 
    				this.setList.push(index)
    			}
    		}
    	}
    }
    </script>
    <style lang="scss">
    </style>

很简单的一个demo，学习思路为主，cv代码为辅

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/c49dade062774947a77691a551b0e621.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/9d9870f608524ea7adb3591bc00a894a.png