vue中class与style用法

在vue中属性绑定使用的是v-bind，属性绑定可以实现width、height、title等基本属性

<div id="box">
    <img :src="url" alt="" :width="w" :title="t" />
</div>

<script>
    var box =new Vue({
        el: "#box",
        data: {
            url: "http://www.baidu.com/img/dong_ffc8c3961fc553a629bf3fc8dd7bdb1d.gif",
            w: "200px",
            t: "这是一张图片"
}
})
</script> 

除了基本属性外的绑定外，还有两个比较特殊的属性：class和style

class第一种定义方式：

<style>
    .red {color: red}
</style>
<div id="box">
    <strong :class="[red]">文字...</strong>
</div>
<script>
    var box =new Vue({
        el: "#box",
        data: {
            red: "red"
        }
    })
</script> 

当有多个class时可以直接添加进去：

<style>
    .red {color: red}
    .blue {background-color: blue}
</style>
<div id="box">
    <strong :class="[red,blue]">文字...</strong>
</div>
<script>
    var box =new Vue({
        el: "#box",
        data: {
            red: "red",
            blue: "blue"
        }
    })
</script> 

第二种用法：json

<style>
    .red {color: red}
    .blue {background-color: blue}
</style>
<div id="box">
    <strong :class="{red: a, blue: b}">文字...</strong>
</div>
<script>
    var box =new Vue({
        el: "#box",
        data: {
            a: true,
            b: false
        }
    })
</script> 

<style>
    .red {color: red}
    .blue {background-color: blue}
</style>
<div id="box">
    <strong :class="json">文字...</strong>
</div>
<script>
    var box =new Vue({
        el: "#box",
        data: {
            json: {
                red: true,
                blue: false
}
        }
    })
</script> 

style的用法：

数组引用方式

<style>
    .red {color: red}
    .blue {background-color: blue}
</style>
<div id="box">
    <strong :style="[c, b]">文字...</strong>
</div>
<script>
    var box =new Vue({
        el: "#box",
        data: {
           c: {color: 'red'},
           b: {backgroundColor: 'blue'}
        }
    })
</script> 

还可以直接添加纯json样式

<style>
    .red {color: red}
    .blue {background-color: blue}
</style>
<div id="box">
    <strong :style="c">文字...</strong>
</div>
<script>
    var box =new Vue({
        el: "#box",
        data: {
           c: {color: 'red', backgroundColor: 'blue'}
        }
    })
</script> 

除了上述方式外，还可以直接使用json的方式，用法同class一样。

注意复合样式要使用驼峰命名法。