Vue 实现单选和多选
日常工作中,UI 库中 单选/多选 组件并不一定非常符合业务需求。这时候,不妨自己动手搞一个。单选思路选中标识值与对象标识匹配时(本例使用索引),给所在标签添加选中样式;点击标签时,更改选中标识值。代码:<template><ul><liv-for="(city, index) in cityList":key="index":class="{ checked: in
·
日常工作中,UI 库中 单选/多选 组件并不一定非常符合业务需求。这时候,不妨自己动手搞一个。
单选
效果
思路
选中标识值与对象标识匹配时(本例使用索引),给所在标签添加选中样式;点击标签时,更改选中标识值。
代码
<template>
<ul>
<li
v-for="(city, index) in cityList"
:key="index"
:class="{ checked: index === checkedIndex }"
@click="changChecked(index)"
>
{{ city }}
</li>
</ul>
</template>
<script>
export default {
name: 'Home',
data () {
return {
checkedIndex: 0,
cityList: ['上海', '北京', '广州', '西安']
}
},
methods: {
changChecked (index) {
this.checkedIndex = index
}
}
}
</script>
<style lang="scss" scoped>
ul {
padding: 0;
li {
display: inline-block;
border: 1px solid #000;
border-radius: 8px;
margin-left: 5px;
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transition: all 0.3s linear;
&.checked {
border: 1px solid #fff;
color: #fff;
background-color: #0cf;
}
&:hover {
border: 1px solid #fff;
color: #fff;
background-color: #0cf;
}
}
}
</style>
多选(2 种方法)
效果
方法一
思路
选中标识值为数组,标识值包含当前对像标识时(本例使用索引),给所在标签添加选中样式;点击标签时,若不包含选中标识,添加到数组;否则从数组从移除。
代码
<template>
<ul>
<li
v-for="(city, index) in cityList"
:key="index"
:class="{ checked: checkedList.includes(index) }"
@click="changChecked(index)"
>
{{ city }}
</li>
</ul>
</template>
<script>
export default {
name: 'Home2',
data () {
return {
checkedList: [],
cityList: ['上海', '北京', '广州', '西安'],
}
},
methods: {
changChecked (index) {
if (this.checkedList.includes(index)) {
this.checkedList = this.checkedList.filter(item => {
return item !== index
})
} else {
this.checkedList.push(index)
}
}
}
}
</script>
<style lang="scss" scoped>
ul {
padding: 0;
list-style: none;
li {
display: inline-block;
margin-left: 5px;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
&::before {
display: inline-block;
margin-right: 2px;
border: 1px solid #000;
width: 10px;
height: 10px;
line-height: 10px;
content: "";
transition: all 0.3s linear;
}
&.checked {
color: #0CF;
}
&.checked::before {
border: 1px solid #fff;
background-color: #0CF;
}
}
}
</style>
方法二
思路
通过引入辅助变量实现。每个对象添加一个是否选中标识,若标识为 true
,给所在标签添加选中样式;点击标签时,取反所在对象标识。
代码
<template>
<ul>
<li
v-for="(item, index) in cityList"
:key="index"
:class="{ checked: item.checked }"
@click="changChecked(index)"
>
{{ item.city }}
</li>
</ul>
</template>
<script>
export default {
name: 'Home3',
data () {
return {
cityList: [
{
city: '上海',
checked: false
},
{
city: '北京',
checked: false
},
{
city: '广州',
checked: false
},
{
city: '西安',
checked: false
}
]
}
},
methods: {
changChecked (index) {
this.cityList[index].checked = !this.cityList[index].checked
}
}
}
</script>
<style lang="scss" scoped>
ul {
padding: 0;
list-style: none;
li {
display: inline-block;
margin-left: 5px;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
&::before {
display: inline-block;
margin-right: 2px;
border: 1px solid #000;
width: 10px;
height: 10px;
line-height: 10px;
content: "";
transition: all 0.3s linear;
}
&.checked {
color: #0CF;
}
&.checked::before {
border: 1px solid #fff;
background-color: #0CF;
}
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)