vue如何自定义按钮单选和多选
作者：屿-·
这篇文章主要介绍了vue如何自定义按钮单选和多选问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue自定义按钮单选和多选
自定义按钮单选
单选效果图如上
用for循环出每一项的Index作为判断依据，index改变后 把index给num,改变其动态样式。此处的样式用的是tm-vuetify框架里的样式，动态的样式必须写在style里，否则不起作用。
<view class=" flex flex-wrap">
<view class="type flex-center text-size-n ma-20 mb-5 py-20 px-20" v-for="(item,index) in punishList" :key="index" :class="[num == index ? 'type_tips' : '']" @click="changeIndex(index)">{{item}}</view>
</view>num:0,
changeIndex(index){
this.num = index
},.type{
background: #f0f0f0;
color: #7c7c7c;
}
.type_tips{
background: #ffa16a;
color: #fff;
}自定义按钮多选和反选
多选效果图如上
利用includes()匹配来实现，
includes的用法：用于搜索筛选关键字 后把数据重新渲染列表
//使用includes方法，查找checkedGroup的选项
<view class=" flex flex-wrap">
<view class="type flex-center text-size-n ma-20 mb-5 py-20 px-20" v-for="item in forceList" @click="handActive(item)" :class="{type_tips:checkedGroup.includes(item)}">{{item}}</view>
</view>handActive(v,i){
if(this.checkedGroup.includes(v)){
// 反选的
this.checkedGroup=this.checkedGroup.filter(function (ele){return ele != v;});
}else{
// 选中的
this.checkedGroup.push(v);
}
},.type{
background: #f0f0f0;
color: #7c7c7c;
}
.type_tips{
background: #ffa16a;
color: #fff;
}vue div 单选、多选，多选且最多只能选择三个
先把准备工作做好
1. css
.contilor{
width: 50%;
margin: 5% auto;
}
.box{
display: flex;
flex-wrap: wrap;
}
.item{
padding: 6px 8px;
border: 1px solid #3C9CFF;
margin: 8px 6px 0 10px;
font-size: 12px;
border-radius: 6px;
}
.item1{
background-color: #3C9CFF;
color: #fff;
}2. js数据格式
<script type="text/javascript">
let itemData = [{
id: '1',
text: '识别性',
select:false
},
{
id: '2',
text: '独特性',
select:false
},
{
id: '3',
text: '易记性',
select:false
},
{
id: '4',
text: '识别',
select:false
},
{
id: '5',
text: '学识',
select:false
},
{
id: '6',
text: '持久性',
select:false
},
{
id: '7',
text: '易传播',
select:false
}
];
new Vue({
el: '#app',
data() {
return {
itemList:itemData
}
},
mounted() {
},
methods: {
}
})
</script>3. html
<div class="box">
<div class="item" v-for="(item,i) in itemList" :key="i">
<span>{{item.text}}</span>
</div>
</div>单选
1.效果图
2.html
<div class="box">
<div class="item" v-for="(item,i) in itemList" :key="i" :class="{'item1':index === i}"
@click="onSelect(i)">
<span>{{item.text}}</span>
</div>
</div>3.js
data() {
return {
itemList: itemData,
index: 0,
}
},
methods:{
onSelect(i) {
this.index = i
}
}多选
1.效果图
2.html
<div class="item" v-for="(item,i) in itemList" :key="i" :class="{'item1':item.select}"
@click="onSelect1(i)">
<span>{{item.text}}</span>
</div>
</div>3.js
data() {
return {
itemList: itemData
}
},
methods:{
onSelect1(i) {
this.itemList[i].select = !this.itemList[i].select;
}
}多选且最多只能选择三个，选择第四个会出现提示，前面的也可以取消
1.效果图
2.html
<div class="box">
<div class="item" v-for="(item,i) in itemList" :key="i" :class="{'item1':item.select}"
@click="onSelect2(i)">
<span>{{item.text}}</span>
</div>
</div>3.js
data() {
return {
itemList: itemData,
chooseData: []
}
},
methods:{
onSelect2(i) {
let text = this.itemList[i].text;
if (!this.itemList[i].select && this.chooseData.length > 2) {
alert("最多只能选择3个")
return
}
this.itemList[i].select = !this.itemList[i].select;
//选中并且数组小于3则追加
if (this.itemList[i].select && this.chooseData.length < 3) {
this.chooseData.push(text)
}
//取消选中
if (!this.itemList[i].select) {
this.chooseData.splice(this.chooseData.indexOf(text), 1);
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。