vue.js li 切换样式

66 阅读 0 评论 44 点赞

我是靠谱客的博主文艺哈密瓜，最近开发中收集的这篇文章主要介绍vue.js li 切换样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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>