因为是学习vue我也是刚入门,只是简单的记录一下学习过程中用到的小组件和小问题,就不做其他的描述了
需求:标签的多选/反选
我使用的是 Element组件,具体安装就不说了自行百度
使用 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中初始化数据
data() {
return {
interestList: [],//用来初始化数据 例 PS:[{id:1,interestName:"标签1",isSelected:false}] 这个可以根据自己的需求自行定义 我在数据中默认添加了一个isSelected字段用来区别标签是否选中 true:选中状态 ,false:未选中状态
interestSelected: [] //保存选择标签 例 PS:[1,2,4]//存放内容为标签的id 此值唯一(可自行根据自己的需求定义)
}
}
定义标签style
//定义选中状态的背景和边框颜色(可根据需求自行定义)
<style scoped>
.margin-top-10 {
margin-top: 10px;
}
.active {
background: #fd7522;
border: 1px solid #fd7522;
color: #fff;
}
</style>
定义方法 用以响应修改点击时标签的状态
methods: {
selected(item) {
//点击时状态置反 true -> false / false -> true
item.isSelected = !item.isSelected
//判断当修改过的状态为true时将此标签id存放进数组中
if (item.isSelected) {
this.interestSelected.push(item.id)
} else {
//否则将此id从数组中移除
this.interestSelected.splice(this.interestSelected.indexOf(item.id), 1)
}
}
}
拿到此选中标签集合可进行后续操作,比如说上传到服务器更新数据库等等
下面是效果图:
效果预览
2021.07.07 17:21:06 周三 多云
