Vue-点击 li 动态添加class --＞[练]

最新推荐文章于 2024-04-13 13:52:49 发布

原创最新推荐文章于 2024-04-13 13:52:49 发布 · 588 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该博客展示了如何使用Vue.js实现列表项点击切换背景颜色的功能。通过HTML、CSS和JavaScript代码，创建了一个简单的列表，当点击列表项时，当前选中的项将变为红色背景。代码中使用了Vue的v-for指令进行数据绑定，并通过:class实现条件样式切换。

Vue @Draven

效果预览
html代码
css代码
js代码

效果预览

请添加图片描述

html代码

<body>
    <div id="box">
        <ul>
            <li v-for="(temp,index) in dataList" @click="addClass(index)" :class="current===index? 'bgColor':''">
                {{temp}}
            </li>
        </ul>
    </div>
</body>

css代码

    <style>
        .bgColor{
            background-color: red;
        }
    </style>

js代码

    <script src="lib/vue.js"></script>
        <script>
        new Vue({
            el: "#box",
            data:{
                current:0,
                dataList:["杨铁丝","杨铁胆","杨铁锤"],
            },
            methods:{
                addClass(index){
                    this.current=index;
                },
            },
        })
    </script>