本文环境：windows7、vue2.9.6，该方法适用于所有品牌的电脑。
vue.js切换改变颜色的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<title>变色选择器</title>
<style>
.zong {
display: flex;
flex-direction: row;
flex-flow: row wrap;
}
.button_diva {
border-radius: 5px;
background-color: blue;
padding: 0.5rem;
width: auto;
margin: 0.5rem;
color: #fff;
}
.avtiv {
background-color: #000;
}
</style>
</head>
<body>
<div id="Vue">
<div>
<div :class="item.index == status ? 'avtiv':''" v-for="(item,index) in sites" :key="index"
@click="bintap(item,index)">
<p>{{item.name}}</p>
</div>
</div>
<div>
{{name}}
</div>
</div>
</body>
<script>
new Vue({
el: "#Vue",
data: {
status: 0,
sites: [
{
name: 'Runoob',
index:0
},
{
name: 'Google',
index:1
},
{
name: 'Taobao',
index:2
},
{
name: 'zhoayun',
index:3
}
],
name: 123
},
methods: {
bintap(item,index) {
console.log(item.index)
this.status = item.index
if (item.index == 0) {
this.name = 123
} else if (item.index == 1) {
this.name = 511
} else if (item.index == 2) {
this.name = 456
}else if (item.index == 3) {
this.name = 789
}
}
},
created() {
}
})
</script>
<script>
$(document).ready(function () {
});
</script>
</html>
以上就是vue.js怎么切换改变颜色的详细内容，更多请关注其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
