VUE属性绑定
class 與 style 是 HTML 元素的屬性，用于設(shè)置元素的樣式，我們可以用 v-bind 來設(shè)置樣式屬性。
Vue.js v-bind 在處理 class 和 style 時(shí)， 專門增強(qiáng)了它。表達(dá)式的結(jié)果類型除了字符串之外，還可以是對象或數(shù)組。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>VUE綁定屬性</title><script src="js/vue.min.js"></script><style>.bg{width:400px;height: 400px;background: #FF0000;}.text-danger{border: 1px solid #00f;}</style></head><body><div id="app"><div v-bind:class="{bg:isBg,'text-danger':hasError}"></div></div><script>new Vue({el:'#app',data:{isBg:true,hasError:true}})</script></body> </html>?
?
?也可以以另外的格式：
?
?我們知道在CSS中有行內(nèi)樣式，現(xiàn)在可以通過VUE內(nèi)聯(lián)樣式來實(shí)現(xiàn)：
效果 如下：
前端代碼：
?
也可以把{color:activeColor,fontSize:fontSize+'px'}變成一個(gè)樣式對象styleObject，在VUE代碼中對其進(jìn)行設(shè)置：
繼續(xù)升級，使用數(shù)組，將多個(gè)樣式綁定到一個(gè)對象上：
?
總結(jié)
- 上一篇： 为啥一到年底腾讯市值就大涨？？？？？？
- 下一篇： 高薪面试题必备之HashMap 的底层原