v-bind动态绑定class(数组语法)

最新推荐文章于 2024-08-21 00:19:03 发布

求财专用糖

最新推荐文章于 2024-08-21 00:19:03 发布

阅读量830

点赞数 1

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_41768447/article/details/107734646

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

数组语法的含义：class后面跟的是一个数组；

数组语法的四种用法：

用法一：直接通过 [ ] 绑定一个类；

<h2 :class="['active']">hello world</h2>

用法二：也可以传入多个值；

<h2 :class="['active','line']">hello world</h2>

用法三：和普通的类同时存在，并不冲突；

注：会有title/active/line三个类；

<h2 class="title" :class="['active','line']">hello world</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中；

注：classes是一个计算属性；

<h2 class="title" :class="classes">hello world</h2>

效果展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-vBind动态绑定class(数组语法)</title>
</head>
<body>
    <div id="arrays">
        <h2 class="title" :class="[active,line]">message</h2>
        <h2 class="title" :class="getClasses()">message</h2>
    </div>
    
    <script src="../文件/vue.js"></script>
    <script>
        const arrays = new Vue({
            el:'#arrays',
            data:{
                message:'我是Vue',
                active:'1111',
                line:'2222'
            },
            methods:{
                getClasses:function(){
                    return [this.active,this.line]
                }
            }
        })
    </script>
</body>
</html>