码迷,mamicode.com
首页 > 编程语言 > 详细

7. v-bind 绑定Class操作 【数组语法】

时间:2021-06-28 18:40:32      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:数组   语法   new   aabb   style   nbsp   rip   绑定   methods   

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

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

 

7. v-bind 绑定Class操作 【数组语法】

标签:数组   语法   new   aabb   style   nbsp   rip   绑定   methods   

原文地址:https://www.cnblogs.com/bi-hu/p/14934072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!