因?yàn)槭菍W(xué)習(xí)vue我也是剛?cè)腴T,只是簡(jiǎn)單的記錄一下學(xué)習(xí)過(guò)程中用到的小組件和小問(wèn)題,就不做其他的描述了
需求:標(biāo)簽的多選/反選
我使用的是 Element組件,具體安裝就不說(shuō)了自行百度
使用 el-row 嵌套 el-button 的方法:
<el-row class="wp-list">
<el-button
class="margin-top-10"
v-for="item in interestList"
:key="item.interestName"
:class="{ active: item.isSelected }"
@click="selected(item)"
>{{ item.interestName }}</el-button
>
</el-row>
在data中初始化數(shù)據(jù)
data() {
return {
interestList: [],//用來(lái)初始化數(shù)據(jù) 例 PS:[{id:1,interestName:"標(biāo)簽1",isSelected:false}] 這個(gè)可以根據(jù)自己的需求自行定義 我在數(shù)據(jù)中默認(rèn)添加了一個(gè)isSelected字段用來(lái)區(qū)別標(biāo)簽是否選中 true:選中狀態(tài) ,false:未選中狀態(tài)
interestSelected: [] //保存選擇標(biāo)簽 例 PS:[1,2,4]//存放內(nèi)容為標(biāo)簽的id 此值唯一(可自行根據(jù)自己的需求定義)
}
}
定義標(biāo)簽style
//定義選中狀態(tài)的背景和邊框顏色(可根據(jù)需求自行定義)
<style scoped>
.margin-top-10 {
margin-top: 10px;
}
.active {
background: #fd7522;
border: 1px solid #fd7522;
color: #fff;
}
</style>
定義方法 用以響應(yīng)修改點(diǎn)擊時(shí)標(biāo)簽的狀態(tài)
methods: {
selected(item) {
//點(diǎn)擊時(shí)狀態(tài)置反 true -> false / false -> true
item.isSelected = !item.isSelected
//判斷當(dāng)修改過(guò)的狀態(tài)為true時(shí)將此標(biāo)簽id存放進(jìn)數(shù)組中
if (item.isSelected) {
this.interestSelected.push(item.id)
} else {
//否則將此id從數(shù)組中移除
this.interestSelected.splice(this.interestSelected.indexOf(item.id), 1)
}
}
}
拿到此選中標(biāo)簽集合可進(jìn)行后續(xù)操作,比如說(shuō)上傳到服務(wù)器更新數(shù)據(jù)庫(kù)等等
下面是效果圖:
效果預(yù)覽
2021.07.07 17:21:06 周三 多云
