11. Vue 中通过v-bind属性绑定为元素，设置class类样式

Devops海洋的渔夫

发布于 2020-03-19 17:20:23

1.4K0

发布于 2020-03-19 17:20:23

文章被收录于专栏：Devops专栏

使用class样式

数组

<h1 :class="['red', 'thin']">通过v-bind属性绑定为元素</h1>

数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">通过v-bind属性绑定为元素</h1>

数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">通过v-bind属性绑定为元素</h1>

直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">通过v-bind属性绑定为元素</h1>

上面罗列了四种v-bind绑定元素class样式的方式，下面逐个示例。

首先编写样式，使用class直接设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>

    <div id="app">

        <h1 class="red thin italic active">通过v-bind属性绑定为元素</h1>

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {},
            methods:{}
        })
    </script>

</body>
</html>

浏览器显示如下：