动态修改class

vue-cli

关键代码

• :class="{'active':item.active}"
• @click="checkFun(item)"
• that.active ? this.$set(that,'active',false) : this.$set(that,'active',true);

<template>
    <div>
        <div class="w check">
            <p :class="{'active':item.active}" v-for="item in checkList" @click="checkFun(item)">
                <i></i>{{item.name}}
            </p>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                checkList: [
                    { name: 'Css'},
                    { name: 'Css预处理器' },
                    { name: 'HTML' },
                    { name: 'JavaScript' },
                    { name: '模板' },
                    { name: '框架' },
                    { name: 'Vue' },
                    { name: '杂谈' },
                    { name: '性能' },
                    { name: '基础' },
                    { name: '基础' },
                    { name: '基础' },
                    { name: '基础' },
                ]
            }
        },
        methods: {
            checkFun(that){
                that.active ? this.$set(that,'active',false) : this.$set(that,'active',true);
            }
        }
    }
</script>
<style scoped lang="stylus">
    p
        width:100%;
        line-height:30px;
        width:auto;
        display: inline-block;
        margin:0px 15px 0px 0px;
        cursor:pointer;
        i
            width:14px;
            height:14px;
            border:1px solid #ddd;
            margin-right:8px;
            vertical-align:-3px;
            border-radius:3px;
    p.active
        color:#81D841;
        i
            border-color: #81D841;
            background-color: #81D841;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
</style>

作者 wendy
2018 年 1月 9日

参考文献