2020年7月6日,晴,今天又是炎热的一天,无聊的我 积极的我来写一篇博客吧。 |ू・ω・` )
在这里插入图片描述
我们需要先写好内容,还有样式

<div id="app">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>
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;
}

下图就是最基本的样式
在这里插入图片描述
接下来,我们需要使用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>
<script>
    new Vue({
        el: '#app',
        data: {
            list: ['aaa', 'bbb', 'ccc', 'ddd'],
        }
    })
</script>

数据已经循环出,接下来才是重点,我们所要做的效果是点击四个钟任意一个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>
<script>
    new Vue({
        el: '#app',
        data: {
            list: ['aaa', 'bbb', 'ccc', 'ddd'],
            //activeNum为默认值,这里就是刚打开页面,什么都没点击时的值
            activeNum:0
        },
        methods: {
            active(i){
            	//当鼠标点击后,data中activeNum的值则为点击的li的下标
                this.activeNum = i
            }
        }
    })
</script>

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

.active {
    background-color: red;
    color: white;
}

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

Logo

前往低代码交流专区

更多推荐