zoukankan      html  css  js  c++  java
  • 7. v-bind 绑定Class操作 【数组语法】

    这种写法用的比较少 因为...没必要 多此一举了  【了解即可】

            <h2 :class="['active','aabb']">Hello World</h2>

    这样的话 因为他是直接带了单引号 所以他的代码会是:

    <h2 class="active aabb">Hello World</h2>

    如果没加单引号 那么会按照一个变量来解析:

    <div id="app">
        <h2 :class="[active,aabb]">Hello World</h2>
    </div>
    
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                active: "none",
                aabb: "red"
            }
        })
    </script>

    所以 p2的代码就会是:

    <h2 class="none red">Hello World</h2>

    所以为什么说没必要 因为我是不是可以直接 class = “none  red” 何必呢?

    还有一种写法:放在方法中返回 ,

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                active: "none",
                aabb: "red"
            },
            methods:{
                statr:function (){
                    return [this.aabb];
                }
            }
        })
    </script>

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14934072.html

  • 相关阅读:
    DDD 领域驱动设计
    IOC 控制反转
    WCF
    Lucene 全文检索引擎
    Redis
    Cache 缓存
    return
    PHP中empty();和isset();的区别.
    sql 简单用语
    关系型数据库
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14934072.html
Copyright © 2011-2022 走看看