VUE中点击切换样式(切换)
点击选项一,选项一变色点击选项二,选项二变色<template><div id="app"><div><span @click="select(1)" :class="index ==1?'blue':'gery'">选项一</span><span @click="select(2)" :class="index ==2?'blue
·
点击选项一,选项一变色
点击选项二,选项二变色
<template>
<div id="app">
<div>
<span @click="select(1)" :class="index ==1?'blue':'gery'">选项一</span>
<span @click="select(2)" :class="index ==2?'blue':'gery'">选项二</span>
<span @click="select(3)" :class="index ==3?'blue':'gery'">选项三</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
index: 1,
};
},
methods: {
select(i) {
this.index = i;
},
},
};
</script>
<style>
.gery {
color: grey;
font-size: 20px;
}
.blue {
color: blue;
font-size: 30px;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)