vue学习(绑定class、v-bind:style(对象语法、数组语法))

1绑定 HTML Class

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

内联样式在模板里

<div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div>
  <script type="text/javascript">
        var vm1 = new Vue({
            el: "#div1",
            data: {
                isActive: true,
                hasError: true,
            }
        })
 </script>

通过浏览器查看，渲染的html结构是：

<div id="div1" class="active text-danger"></div>

内联样式不在模板里

 <div id="div2" :class="class_obj"></div>

    <script type="text/javascript">
        var vm2 = new Vue({
            el: "#div2",
            data: {
                class_obj: {
                    isActive: true,
                    hasError: true,
                }
            }
        })
    </script>

渲染为如下的结构：

<div id="div2" class="isActive hasError"></div>

绑定返回对象的计算属性

<div id="div3" v-bind:class="classObject"></div>

    <script type="text/javascript">
        var vm3 = new Vue({
            el: "#div3",
            data: {
                isActive: true,
                error: true
            },
            computed: {
                classObject: function () {
                    return {
                        active: this.isActive && this.error,
                        'text-danger': this.error
                    }
                }
            }
        })
    </script>

渲染的html结构如下：

<div id="div3" class="active text-danger"></div>

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div id="div4" v-bind:class="[activeClass, errorClass]"></div>
    <script type="text/javascript">
        new Vue({
            el: "#div4",
            data: {
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        })
    </script>

渲染为

<div id="div4" class="active text-danger"></div>
``

###class 列表使用三元表达式
如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div5",
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>

渲染为：
```<div id="div5" class="active text-danger"></div>

绑定内联样式v-bind:style

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象

<div id="div1" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{ msg }}</div>

<script type="text/javascript">
    new Vue({
        el: "#div1",
        data: {
            activeColor: 'red',
            fontSize: 30,
            msg: "hello vue"
        }
    })
</script>

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div id="div2" v-bind:style="styleObject">{{ msg }}</div>
<script type="text/javascript">
    new Vue({
        el: "#div2",
        data: {
            msg: "直接绑定到一个样式对象通常更好",
            styleObject: {
                color: 'red',
                fontSize: '23px'
            }
        }
    })
</script>

对象语法常常结合返回对象的计算属性使用

<div id="div3" v-bind:style="styleObject">{{ msg }}</div>
<script type="text/javascript">
    new Vue({
        el: "#div3",
        data: {
            msg: "结合返回对象的计算属性使用",
            color: 'red',
            fontSize: '12px'
        },
        computed: {
            styleObject: function () {
                return {color: 'yellow', fontSize: '23px'}
            }
        }
    })
</script>

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

<div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div>
<script type="text/javascript">
    new Vue({
        el: "#div4",
        data: {
            msg: "我是数组绑定方法",
            baseStyles: {
                color: 'green',
                fontSize: '30px'
            },
            overridingStyles: {
                'font-weight': 'bold'
            }
        }
    })
</script>