vue如何自定義按鈕單選和多選
更新時間：2023年07月03日 08:39:03 作者：嶼-·
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue自定義按鈕單選和多選
自定義按鈕單選
單選效果圖如上
用for循環(huán)出每一項(xiàng)的Index作為判斷依據(jù)，index改變后 把index給num,改變其動態(tài)樣式。此處的樣式用的是tm-vuetify框架里的樣式，動態(tài)的樣式必須寫在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()匹配來實(shí)現(xiàn)，
includes的用法：用于搜索篩選關(guān)鍵字 后把數(shù)據(jù)重新渲染列表
//使用includes方法，查找checkedGroup的選項(xiàng)
<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 單選、多選，多選且最多只能選擇三個
先把準(zhǔn)備工作做好
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數(shù)據(jù)格式
<script type="text/javascript">
let itemData = [{
id: '1',
text: '識別性',
select:false
},
{
id: '2',
text: '獨(dú)特性',
select:false
},
{
id: '3',
text: '易記性',
select:false
},
{
id: '4',
text: '識別',
select:false
},
{
id: '5',
text: '學(xué)識',
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;
}
}多選且最多只能選擇三個，選擇第四個會出現(xiàn)提示，前面的也可以取消
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;
//選中并且數(shù)組小于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);
}
}
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue解決使用webpack打包后keep-alive不生效的方法
今天小編就為大家分享一篇vue解決使用webpack打包后keep-alive不生效的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何動態(tài)設(shè)置背景漸變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue3判斷對象是否為空的實(shí)現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-07-07
Tree shaking 是一種通過清除多余代碼方式來優(yōu)化項(xiàng)目打包體積的技術(shù),就是在保持代碼運(yùn)行結(jié)果不變的前提下,去除無用的代碼,本文給大家介紹Vue 3.0中Treeshaking特性是什么,感興趣的朋友一起看看吧2023-10-10
淺談在vue項(xiàng)目中如何定義全局變量和全局函數(shù)
本篇文章主要介紹了淺談在vue項(xiàng)目中如何定義全局變量和全局函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
vue3項(xiàng)目配置按需自動引入自定義組件unplugin-vue-components方式
這篇文章主要介紹了vue3項(xiàng)目配置按需自動引入自定義組件unplugin-vue-components方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式
這篇文章主要為大家詳細(xì)介紹了vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue Element UI 表單自定義校驗(yàn)規(guī)則及使用
這篇文章主要介紹了Vue Element UI 表單自定義效驗(yàn)規(guī)則及使用,文中通過代碼介紹了常見表單效驗(yàn)規(guī)則，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue中使用ts配置的具體步驟，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08