vue实现给当前元素添加样式,其他元素无样式问题
作者：woderlili
这篇文章主要介绍了vue实现给当前元素添加样式,其他元素无样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
给当前元素添加样式，其他元素无样式
今天做项目的时候遇到，给当前元素绑定样式，原来使用原生js写点亮盒子的时候都是利用for循环，循环元素列表，在利用this来绑定当前元素，给当前元素添加类名或类样式，当然在添加类样式前，还要将所有添加过的类样式移除掉，然而vue就没有这么麻烦
咱们直接上代码
<template>
<div class="content">
<span
v-for="(item, index) in datas" //遍历我们的数组
class="btn"
:class="{active:index==isShow}" //看vue官方文档可以通过boolean值控制样式的显隐性
@click="changeColor(index)">{{item.city}}</span> //在点击的时候我们将index的值传到方法中
</div>
</template>
<script>
export default {
data() {
return {
datas: [
{ city: "上海" },
{ city: "北京" },
{ city: "关东" },
{ city: "安徽" }
],
isShow: -1
};
},
methods: {
changeColor(index) {
console.log(index);
this.isShow = index
}
}
};
</script>
<style scoped>
.content {
width: 300px;
margin:100px auto;
}
.btn {
display: inline-block;
margin: 10px;
border: 1px solid #666;
border-radius: 10px;
padding:4px 8px;
color: #5e13b4;
font-size: 14px;
cursor: pointer;
}
.active {
background-color: #5e13b4;
color: #fff;
}
</style>vue动态添加样式
vue实现点击切换改变样式
html代码：根据数据动态循环一个列表
<ul>
<li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)">{{list}}</li>
</ul>js代码：
export default {
data(){
return{
dataList:["选项1","选项2","选项3","选项4","选项5","选项6"],
clicked:0 //标识，初始化默认选中第一项
}
},
methods:{
changeTab(index){
this.clicked = index;
}
}
}css样式，点击选中添加黑色边框
.bor{
border:2px solid black;
}效果：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。