vue.js样式绑定
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 class 属性绑定
<!DOCTYPE html><html> ???<head> ???????<meta charset=‘utf-8‘> ???????<title>style of vue</title> ???????<script src=‘vue.min.js‘></script> ???????<style> ???????.active { ???????????width: 100px; ???????????height: 100px; ???????????background: green; ???????} ???????</style> ???</head> ???<body> ???????<div id="app"> ???????????<div v-bind:class="{active}"> ???????????</div> ???????</div> ???????<script> ???????new Vue({ ???????????el: ‘#app‘, ???????????data: { ???????????????active: true ???????????} ???????}) ???????</script> ???</body></html>- 我们也可以在对象中传入更多属性用来动态切换多个class. text-danger类背景颜色覆盖了active类的颜色：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>style of vue</title><script src=‘vue.min.js‘></script><style>.active { ???width: 100px; ???height: 100px; ???background: green;}.text-danger { ???background: red;}</style></head><body><div id="app"><div class="static" ???v-bind:class="{ active, ‘text-danger‘: hasError }"></div></div><script>new Vue({el: ‘#app‘,data: { ???active: true, ???hasError: true}})</script></body></html>- 我们也可以直接绑定数据里的一个对象：
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>object of vue style</title> ???????<script src="vue.min.js"></script> ???????<style> ???????.active { ???????????width: 100px; ???????????height: 100px; ???????????background: green; ???????} ???????.text-danger { ???????????background: red; ???????} ???????</style> ???</head> ???<body> ???????<div id="app"> ???????????<div v-bind:class="classObject"></div> ???????</div> ???????<script> ???????new Vue({ ???????????el: ‘#app‘, ???????????data: { ???????????????classObject: { ???????????????????active: true, ???????????????????‘text-danger‘: true ???????????????} ???????????} ???????}) ???????</script> ???</body></html>- 我们也可以在这里绑定返回对象的计算机属性。这是一个常用且强大的模式：
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>computed of vue style</title> ???????<script src="vue.min.js"></script> ???????<style> ???????.active { ???????????width: 100px; ???????????height: 100px; ???????????background: green; ???????} ???????.text-danger { ???????????background: red; ???????} ???????</style> ???</head> ???<body> ???????<div id="app"> ???????????<div v-bind:class="classObject"></div> ???????</div> ???????<script> ???????new Vue({ ???????????el: ‘#app‘, ???????????data: { ???????????????isActive: true, ???????????????error: null ???????????}, ???????????computed: { ???????????????classObject: function() { ???????????????????return { ???????????????????????active: this.isActive && !this.error, ???????????????????????‘text-danger‘: this.error && this.error.type === ‘fatal‘, ???????????????????} ???????????????} ???????????} ???????}) ???????</script> ???</body></html>数组语法
- 我们可以把一个数组传给v-bind:class,实例如下：
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>array of vue style</title> ???????<script src="vue.min.js"></script> ???????<style> ???????????.active { ???????????????width: 100px; ???????????????height: 100px; ???????????????background: green; ???????????} ???????????.text-danger { ???????????????background: red; ???????????} ???????</style> ???</head> ???<body> ???????<div id="app"> ???????????<div v-bind:class="[activeClass, errorClass]"></div> ???????</div> ???????<script> ???????new Vue({ ???????????el: ‘#app‘, ???????????data: { ???????????????activeClass: ‘active‘, ???????????????errorClass: ‘text-danger‘ ???????????} ???????}) ???????</script> ???</body></html>- errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：
<div v-bind:class="[errorClass ,isActive ? activeClass : ‘‘]"></div>Vue.js style(内联样式)
<!DOCTYPE html><html><head><meta charset="utf-8"><title>line style of vue</title><script src="vue.min.js"></script></head><body> ???<div id="app"> ???????<div v-bind:style="{color: activeColor, fontSize: fontSize + ‘px‘ }">vue学习</div> ???</div> ???<script> ???new Vue({ ???????el: ‘#app‘, ???????data: { ???????????activeColor: ‘green‘, ???????????fontSize: ‘30‘ ???????} ???}) ???</script></body><body>- 也可以直接绑定一个样式对象，让模板更清晰：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue Object of style</title><script src="vue.min.js"></script></head><body><div id="app"><div v-bind:style="styleObject">vue 学习</div></div><script>new Vue({el: ‘#app‘,data: { ???styleObject: { ???color: ‘green‘, ???fontSize: ‘30px‘ ???}}})</script></body></html>- v-bind:style可以使用数组将多个样式对象应用到一个元素上：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue style</title><script src="vue.min.js"></script></head><body><div id="app"><div v-bind:style="[baseStyles, overridingStyles]">vue 学习</div></div><script>new Vue({el: ‘#app‘,data: { ???baseStyles: { ???color: ‘green‘, ???fontSize: ‘30px‘ ???}, ???overridingStyles: { ???‘font-weight‘: ‘bold‘ ???}}})</script></body></html>vue.js样式绑定
原文地址：http://www.cnblogs.com/sinceForever/p/7615818.html