Vue.js实战 学习笔记 四（v-bind及class与style绑定）

DOM元素经常动态地绑定一些class或style（比如轮播时的active）

Vue.js使用v-bind指令进行对class和style多种方法的绑定：通过表达式计算出字符串结果

如笔记二的指令中，有一个初步的了解，回顾当时的代码如下：

<div id="app">
    <a v-bind：href="url">链接</a>
    <img v-bind: src="imgUrl">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            url: "http:  "
            imgUrl: "http: "
        }
    })
</script>

使用v-bind对class绑定的三种方式：对象语法 数组语法 组件使用

对象语法：

给:class设置一个对象，动态切换class

<div id="app">
    <!--语法糖v-bind :-->
    <div :class="{'active' : isActive}"></div>
    <!--:class与普通class可以共存，对象可传入多个属性-->
    <div class="static" :class="{'active': isActive,'error': isError}"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true
            isError: false
        }
    })
</script>

当表达式过于复杂时，同样可以绑定一个计算属性（笔记三），当条件两个以上，均可使用data或computed

<div id="app">
    <div :class="classes"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true
            error: false
        }
        computed: {
　　　　　　　//计算函数为函数形式
            classes：function () {
                return {
                    active: this.isActive && !this.error,
                    'text-fail': this.error && this.error.type === 'fail'
                }
            }
        }
    })
</script>

数组语法

当应用多个class时，可以使用数组语法，为:class绑定一个数组或使用三元表示法，应用一个class列表，或直接在对象语法中使用数组语法

<div id="app">
    <!--绑定一个数组-->
    <div v-bind:class="[activeClass, errorClass]"></div>
    <!--使用三元表达式-->
    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    <!--使用对象语法-->
    <div v-bind:class="[{ active: isActive }, errorClass]"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            activeClass: 'active',
            errorClass: 'error'
        }
    })
</script>

组件：因对组件不了解，暂时未熟悉，待组件学习后复习此处

绑定内联样式

其实在实际项目中，:style并不常见，往往会写在计算属性中

使用:style时，Vue.js会自动为特殊CSS添加前缀，如transform

v-bind:style（直接在元素上写CSS），一般情况下，直接写入长样式不利于维护，故会写在data或computed中，如下：

<div id="app">
    <div v-bind:style="styles"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            styles: {
                color: 'red',
                fontSize: '13px'
            }
        }
    })
</script>