vue.js li 切换样式

选中效果ul li {text-decoration: none;}ul li.active{color: red;}

月落星河°

3585人浏览 · 2018-08-25 10:48:11

月落星河° · 2018-08-25 10:48:11 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^