Vue.js学习笔记 第二篇 样式绑定

Posted 双子宫殿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js学习笔记 第二篇 样式绑定相关的知识，希望对你有一定的参考价值。

Class绑定的对象语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
    <style type="text/css">
        .active {
            width: 64px;
            height: 64px;
            background: blue;
        }
        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
    <div id="app-1">
        <div v-bind:class="{ active: isActive, textDanger: hasError }"></div>
    </div>
    <script type="text/javascript">
        var vm1 = new Vue({
            el: ‘#app-1‘,
            data: {
                isActive: true,
                hasError: false
            }
        })
    </script>
</body>
</html>

最基础样式绑定，是否使用样式由后面的布尔值决定

也可以绑定一个对象，这样看起来代码更清爽一些

<div id="app-2">
    <div v-bind:class="classObject"></div>
</div>
<script type="text/javascript">
    var vm2 = new Vue({
        el: ‘#app-2‘,
        data: {
            classObject: {
                active: true,
                ‘text-danger‘: true
            }
        }
    })
</script>

这两段代码中有个地方要特别注意一下，Bootstrap的text-danger属性分别使用了textDanger（驼峰式）和text-danger（串联式）的写法，这2种写法Vue都是支持的，唯一要注意的是使用串联式要加单引号

例如：font-size属性，在Vue里面可以写成fontSize（驼峰式）或‘font-size‘（串联式）

Class绑定的数组语法

<div id="app-3">
    <!-- 可以用三元表达式来选择性的渲染 -->
    <div v-bind:class="[activeClass, hasError ? errorClass : ‘‘]"></div>
    <!-- 也可以在数组语法中使用对象语法 -->
    <div v-bind:class="[activeClass, { errorClass: hasError }]"></div>
</div>
<script type="text/javascript">
    var vm3 = new Vue({
        el: ‘#app-3‘,
        data: {
            hasError: true,
            activeClass: ‘active‘,
            errorClass: ‘text-danger‘
        }
    })
</script>

内联绑定的对象语法

<div id="app-4">
    <div v-bind:style="{ color:activeColor, fontSize: fontSize + ‘px‘ }">双子宫殿</div>
</div>
<script type="text/javascript">
    var vm4 = new Vue({
        el: ‘#app-4‘,
        data: {
            activeColor: ‘red‘,
            fontSize: 30
        }
    })
</script>

同样内联绑定也可以绑定一个对象

<div id="app-5">
    <div v-bind:style="styleObject">Hello, TanSea!</div>
</div>
<script type="text/javascript">
    var vm5 = new Vue({
        el: ‘#app-5‘,
        data: {
            styleObject: {
                color: ‘green‘,
                fontSize: ‘20px‘
            }
        }
    })
</script>

内联绑定的数组语法

<div id="app-6">
    <div v-bind:style="[ baseStyles, overridingStyles ]">Hello, TanSea!</div>
</div>
<script type="text/javascript">
    var vm6 = new Vue({
        el: ‘#app-6‘,
        data: {
            baseStyles: {
                color: ‘blue‘,
                fontSize: ‘30px‘
            },
            overridingStyles: {
                fontFamily: ‘微软雅黑‘
            }
        }
    })
</script>

总体来说，样式绑定相对来说是比较简单的，只要记住语法格式就行了

以上是关于Vue.js学习笔记 第二篇 样式绑定的主要内容，如果未能解决你的问题，请参考以下文章

我的第二十二篇博客---VUE

vue.js权威指南读书笔记（第二章）

vue.js实战学习——v-bind 及class与 style绑定

如何利用Vue.js库中的v-bind绑定样式属性

Vue.js学习笔记： 数据绑定语法---绑定表达式

Vue.js学习笔记： 数据绑定语法---插值