zoukankan      html  css  js  c++  java
  • v-bind:class 的写法 对象写法 和 数组写法

    <template>
        <div class="about">
    
            <p :class="{classA:isTrue,classB:!isFalse}">classA -- classB</p>
            <h1 :class="hasChange">This is an about page</h1>
            //绑定一个 返回对象 的计算属性
    
            <h1 :class="[{classA:isTrue},hasChange]">This is an about page</h1>
            //绑定多个类名 数组写法 嵌套 对象
            
            <div :class="[classA,classB]"></div>
            <div :class="[isActive ? classC : '', classE]"></div>
            
            //只能是  数组写法 嵌套 对象
            <div :class="[{classA:isTrue}, classB]"></div>
    
    
        </div>
    </template>
    <script>
        export default {
            name: 'About',
            data() {
                return {
                    isTrue: 1,
                    isFalse: 0,
                    list: [{
                            title: 'aaa'
                        },
                        {
                            title: 'sss'
                        }
                    ]
                }
            },
            computed: {
                hasChange() {
                    return {
                        activeBtn: this.isTrue && !this.isFalse,
                        classB: this.list.length > 1
                    }
                }
            }
        }
    </script>
    <style>
        .classA {
            font-size: 130px;
        }
    
        .classB {
            color: #00557f;
        }
    
        .activeBtn {
            border: 1px solid #fcc;
        }
    </style>
  • 相关阅读:
    构建之法阅读笔记02
    学习进度条
    构建之法阅读笔记01
    c++ 与C的区别
    c++ 菜单动态效果
    c++ 方框中绘制菜单代码
    c++ 绘制方框
    c++ 条件编译
    c++ 预处理和多重替换
    c++ 文件共享打开
  • 原文地址:https://www.cnblogs.com/linuxin/p/14870275.html
Copyright © 2011-2022 走看看