vue.js li 切换样式

最新推荐文章于 2025-07-09 10:56:56 发布

原创最新推荐文章于 2025-07-09 10:56:56 发布 · 3.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

VUE 专栏收录该内容

29 篇文章

订阅专栏

博客涉及前端开发领域，重点关联Vue.js技术，但具体内容缺失。Vue.js是前端开发常用框架，能助力构建高效用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选中效果</title>
<script src="./vue.min.js"></script>
<style>
    ul li {
        text-decoration: none;
    }
    ul li.active{
        color: red;
    }
</style>

</head>
<body>

<div id="app">
<ul>
    <li v-for="items in navList" :class="{active:items.isActive}" @click="activeFun(items)">
        <a>
            {{items.text}}
        </a>
    </li>
</ul>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        navList: [
            {text: '谷薯类及其制品', isActive: true},
            {text: '蔬菜类', isActive: false},
            {text: '豆类及豆类制品', isActive: false},
            {text: '肉类', isActive: false}
        ]
    },
    methods: {
        activeFun: function(data){
            this.navList.forEach(function(obj){
                obj.isActive = false;
            });
            data.isActive = !data.isActive;
        }
    }
});
</script>

</body>
</html>