VUE点击切换样式_vue ul li 文本内容样式

2020年7月6日，晴，今天又是炎热的一天，无聊的我 积极的我来写一篇博客吧。 |ू･ω･` )

我们需要先写好内容，还有样式

<div id="app">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>
1
2
3
4
5
6
7
8

ul {
    list-style: none;
    display: flex;
    justify-content: start;
}

li {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid red;
    margin: 0 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

下图就是最基本的样式

接下来，我们需要使用vue.js，大家别忘了script引入.

使用vue，我们就可以v-for循环出数据，这是，我们就可以更改一下li的写法。

<div id="app">
    <ul>
    	//哪个要循环，就在那个标签内写v-for,这里就是循环出list内的数据
        <li v-for="(item,i) in list">{{item}}</li>
    </ul>
</div>
1
2
3
4
5
6

<script>
    new Vue({
        el: '#app',
        data: {
            list: ['aaa', 'bbb', 'ccc', 'ddd'],
        }
    })
</script>
1
2
3
4
5
6
7
8

数据已经循环出，接下来才是重点，我们所要做的效果是点击四个钟任意一个li，那个li就会变颜色，而没点到的就不会变，这里需要写两个，一个是绑定class，另一个是点击事件。

我们接着在li标签内加东西

<div id="app">
    <ul>
    	//@click是v-on:click的缩写，这是v-for循环是带的i就起到了用处，将所点击的li的下标传到active方法内
    	//:class是v-bind:class的缩写，其意思是判断activeNum是否等于当前li的下标，如果等于，加上名为active的样式，如果不等于则空（activeNum会在下面写到）
        <li v-for="(item,i) in list" @click="active(i)" :class="activeNum === i ? 'active':''">{{item}}</li>
    </ul>
</div>
1
2
3
4
5
6
7

<script>
    new Vue({
        el: '#app',
        data: {
            list: ['aaa', 'bbb', 'ccc', 'ddd'],
            //activeNum为默认值，这里就是刚打开页面，什么都没点击时的值
            activeNum:0
        },
        methods: {
            active(i){
            	//当鼠标点击后，data中activeNum的值则为点击的li的下标
                this.activeNum = i
            }
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

css中只需要再加一个样式就行了

.active {
    background-color: red;
    color: white;
}
1
2
3
4

这样就写好了，activeNum跟随鼠标点击变动，而li的下标i是不会变动的，每个li都会判断activeNum的值是否等于自己的下标，等于的话就会加上样式。