通过数据改变样式
点击文字切换颜色
1.v-bind:class
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Vue中的样式绑定</title> </head> <style> .activated{ color: blueviolet; } </style> <body> <!-- 这个元素有一个class样式，叫做 activated，是否使用activated取决于isActivated--> <div id="app" @click="handleDivClick" :class="{activated:isActivated}" >颜色</div> </body> <script> var vm=new Vue({ el:"#app", data:{ isActivated:false }, methods:{ handleDivClick:function(){ this.isActivated=!this.isActivated } } }) </script> </html>
点击后=>
2.v-bind:class数组形式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Vue中的样式绑定</title> </head> <style> .activated{ color: red; } </style> <body> <!-- 这个元素有一个class样式，class可以和数组进行绑定，class的样式取决于className的内容，className可以在vue实例中进行赋值或改变--> <div id="app" @click="handleDivClick" :class="[className]" >颜色</div> </body> <script> var vm=new Vue({ el:"#app", data:{ isActivated:false, className:"" }, methods:{ handleDivClick:function(){ this.className=this.className==="activated"?"":"activated"; } } }) </script> </html>
数组中可以有多个值。
点击后=>
3.
也可以对style进行绑定，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Vue中的样式绑定</title> </head> <body> <div id="app" @click="handleDivClick" :style="styleObj" >颜色</div> </body> <script> var vm=new Vue({ el:"#app", data:{ styleObj:{ color:'black' } }, methods:{ handleDivClick:function(){ this.styleObj.color=this.styleObj.color==='black'?'blue':'black'; } } }) </script> </html>
点击后=》
4.style也可以使用数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Vue中的样式绑定</title> </head> <body> <div id="app" @click="handleDivClick" :style="[styleObj,{fontSize:'20px'}]" >颜色</div> </body> <script> var vm=new Vue({ el:"#app", data:{ styleObj:{ color:'black' } }, methods:{ handleDivClick:function(){ this.styleObj.color=this.styleObj.color==='black'?'blue':'black'; } } }) </script> </html>
:style对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
样式绑定有两种方法，1.class ; 2.style。他们都可以通过数据来实现切换，同样也都可以通过数组进行绑定。
5.在数组中还可以进行条件切换
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
6.当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
在组件中使用
当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如，如果你声明了这个组件：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
然后在使用它的时候添加一些 class：
<my-component class="baz boo"></my-component>
HTML 将被渲染为：
<p class="foo bar baz boo">Hi</p>
对于带数据绑定 class 也同样适用：
<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 truthy[1] 时，HTML 将被渲染成为：
<p class="foo bar active">Hi</p>