vue样式（style）和属性（class）绑定的几种基本方法

绑定语法

<div v-bind:class=""></div>可简写为：<div :class=""></div>style同上

class属性绑定：

1.我们可以为 v-bind:class 设置一个对象，从而动态的切换 class

<style>    .test1{        color:red;    }    .test2{        background:yellow;    }</style><div id="app">        <div :class="{test1 :a , test2: b}">你好吗？</div></div><script>    new Vue({        el:'#app',        data:{            a:true,//根据true/false判断是否执行class            b:true        }    })</script>注意：若test2中color值设为green则会覆盖test1的样式，最后将得到黄底绿字。

2 我们也可以直接绑定数据里的一个对象：

<div id="app">        <div :class="testObj">你好吗？</div></div><script>    new Vue({        el:'#app',        data:{            testObj:{                color:red;                background:yellow;            }        }    })</script>

3.数组绑定

<style>    .test1{        color:red;    }    .test2{        background:yellow;    }</style><div id="app">        <div :class="[test1Class,test2Class]">你好吗？</div></div><script>    new Vue({        el:'#app',        data:{            test1Class:test1,            test2Class:test2        }    })</script>

style样式绑定

1. 我们可以在 v-bind:style 直接设置样式：

<div id="app">    <div :style="{color:cl,background:bk}">你好吗？</div></div><script>    new Vue({        el:'#app',        data:{            cl:'red',            bk:'yellow'        }    })</script>

2.直接绑定到一个样式对象，让模板更清晰：

<div id="app">        <div :style="testObj">你好吗？</div></div><script>    new Vue({        el:'#app',        data:{            testObj:{                color:red;                background:yellow;            }        }    })</script>

3.v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

<div id="app">        <div :style="[test1,test2]">你好吗？</div></div><script>    new Vue({        el:'#app',        data:{            test1{                color:'red'            }                background:'yellow'            }        }    })</script>