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

单选

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

<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>

多选

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

<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代码为辅