vue如何自定義按鈕單選和多選
更新時(shí)間：2023年07月03日 08:39:03 作者：嶼-·
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue自定義按鈕單選和多選
自定義按鈕單選
單選效果圖如上
用for循環(huán)出每一項(xiàng)的Index作為判斷依據(jù)，index改變后 把index給num,改變其動(dòng)態(tài)樣式。此處的樣式用的是tm-vuetify框架里的樣式，動(dòng)態(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 單選、多選，多選且最多只能選擇三個(gè)
先把準(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: '識(shí)別性',
select:false
},
{
id: '2',
text: '獨(dú)特性',
select:false
},
{
id: '3',
text: '易記性',
select:false
},
{
id: '4',
text: '識(shí)別',
select:false
},
{
id: '5',
text: '學(xué)識(shí)',
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;
}
}多選且最多只能選擇三個(gè)，選擇第四個(gè)會(huì)出現(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個(gè)")
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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口
這篇文章主要介紹了vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細(xì), 具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2023-11-11
Vue兩個(gè)通信方式與動(dòng)畫過度及混入使用介紹
最近在寫vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過渡的效果,雖然vue動(dòng)畫不是強(qiáng)項(xiàng),庫也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過渡動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue3中做文件預(yù)覽的項(xiàng)目實(shí)踐
本文主要介紹了在Vue3項(xiàng)目中實(shí)現(xiàn)常見文件類型的預(yù)覽功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
Vue Easytable是一個(gè)基于Vue.js的數(shù)據(jù)表格組件庫,它提供豐富的功能和靈活的配置,幫助開發(fā)者快速搭建復(fù)雜的數(shù)據(jù)表格界面,這篇文章主要介紹了vue easytable組件使用,需要的朋友可以參考下2023-09-09
uniapp實(shí)現(xiàn)省市區(qū)三級(jí)級(jí)聯(lián)選擇功能(含地區(qū)json文件)
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)省市區(qū)三級(jí)級(jí)聯(lián)選擇功能(含地區(qū)json文件)的相關(guān)資料,級(jí)級(jí)聯(lián)是一種常見的網(wǎng)頁交互設(shè)計(jì),用于省市區(qū)選擇,它的目的是方便用戶在一系列選項(xiàng)中進(jìn)行選擇,并且確保所選選項(xiàng)的正確性和完整性,需要的朋友可以參考下2024-06-06
vuex+axios+element-ui實(shí)現(xiàn)頁面請(qǐng)求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實(shí)現(xiàn)頁面請(qǐng)求loading操作,結(jié)合實(shí)例形式分析了vuex+axios+element-ui實(shí)現(xiàn)頁面請(qǐng)求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-02-02
element中el-cascader級(jí)聯(lián)選擇器只有最后一級(jí)可以多選
本文主要介紹了element中el-cascader級(jí)聯(lián)選擇器只有最后一級(jí)可以多選，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
Vue中的 nextTick 涉及到Vue中DOM的異步更新，感覺很有意思，特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識(shí)，很多不太理解，暫且根據(jù)自己的一些感悟介紹下 nextTick2019-05-05
Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能的相關(guān)資料,element-UI表格的使用相信大家都不陌生,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07