我是靠谱客的博主 个性短靴,这篇文章主要介绍Vue点击切换样式,现在分享给大家,希望可以做个参考。

先看效果图
在这里插入图片描述

这里直接是上代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template> <ul> <li :class="[index == status ? 'bechoice' : '']" v-for="(item,index) in list" :key="index" @click="choice(index)"> {{item.text}} </li> </ul> </template> <script> export default { name: "Recharge", data() { return { status: 0, list: [ { text: "热点" }, { text: "政治" }, { text: "娱乐" }, { text: "新闻" }, { text: "军事" }, { text: "体育" } ] }; }, methods: { choice(index) { this.status = index; } } }; </script> <style scoped> ul { list-style: none; display: flex; justify-content: space-around; } li { width: 200px; height: 30px; background: #eeeeee; color: #000; margin-right: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 5px; } .bechoice { background: red; color: #eeeeee; } </style>

注意事项:这里必须要用for循环取到索引

最后

以上就是个性短靴最近收集整理的关于Vue点击切换样式的全部内容,更多相关Vue点击切换样式内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(76)

评论列表共有 0 条评论

立即
投稿
返回
顶部