vue2基本语法详细解析（2.6class与style绑定）

一.class绑定1.绑定字符串适用于样式的名字不确定需要动态指定。head meta charsetUTF-8 / titleClass绑定之字符串形式/title script src../js/vue.js/script style .static { border: 1px solid black; background-color: aquamarine; } .big { width: 200px; height: 200px; } .small { width: 100px; height: 100px; } /style /head body div idapp h1{{msg}}/h1 !-- 静态写法 -- div classstatic small{{msg}}/div hr / !-- 动态写法动静都有 -- !-- 适用场景如果确定动态绑定的样式个数只有1个但是名字不确定。 -- div classstatic :classc1{{msg}}/div button clickchangeBig变大/button button clickchangeSmall变小/button /div script const vm new Vue({ el: #app, data: { msg: Class绑定之字符串形式, c1: small, }, methods: { changeBig() { this.c1 big; }, changeSmall() { this.c1 small; }, }, }); /script /body2.绑定数组适用于绑定的样式名字不确定并且个数也不确定。head meta charsetUTF-8 / titleClass绑定之数组形式/title script src../js/vue.js/script style .static { border: 1px solid black; width: 100px; height: 100px; } .active { background-color: green; } .text-danger { color: red; } /style /head body div idapp h1{{msg}}/h1 !-- 静态写法 -- div classstatic active text-danger{{msg}}/div br / !-- 动态写法动静结合 -- div classstatic :class[active,text-danger]{{msg}}/div br / div classstatic :class[c1, c2]{{msg}}/div br / !-- 适用场景当样式的个数不确定并且样式的名字也不确定的时候可以采用数组形式。 -- div classstatic :classclassArray{{msg}}/div /div script const vm new Vue({ el: #app, data: { msg: Class绑定之数组形式, c1: active, c2: text-danger, classArray: [active, text-danger], }, }); /script /body3.绑定对象适用于样式名字和个数都确定但是要动态决定用或者不用。head meta charsetUTF-8 / titleClass绑定之对象形式/title script src../js/vue.js/script style .static { border: 1px solid black; width: 100px; height: 100px; } .active { background-color: green; } .text-danger { color: red; } /style /head body div idapp h1{{msg}}/h1 !-- 动态写法动静结合 -- !-- 对象形式的适用场景样式的个数是固定的样式的名字也是固定的但是需要动态的决定样式用还是不用。 -- div classstatic :classclassObj{{msg}}/div br / div classstatic :class{active:true,text-danger:false}{{msg}}/div /div script const vm new Vue({ el: #app, data: { msg: Class绑定之对象形式, classObj: { // 该对象中属性的名字必须和css中样式名一致。 active: false, text-danger: true, }, }, }); /script /body二.style绑定head meta charsetUTF-8 / titleStyle绑定/title script src../js/vue.js/script style .static { border: 1px solid black; width: 100px; height: 100px; } /style /head body div idapp h1{{msg}}/h1 !-- 静态写法 -- div classstatic stylebackground-color: green静态写法/div br / !-- 动态写法字符串形式 -- div classstatic :stylemyStyle动态写法字符串形式/div br / !-- 动态写法对象形式 -- div classstatic :style{background-color: gray}动态写法1对象形式/div br / div classstatic :stylestyleObj1动态写法2对象形式/div br / !-- 动态写法数组形式 -- div classstatic :stylestyleArray动态写法数组形式/div /div script const vm new Vue({ el: #app, data: { msg: Style绑定, myStyle: background-color: gray;, styleObj1: { backgroundColor: green, }, styleArray: [{ backgroundColor: green }, { color: red }], }, }); /script /body二.style 绑定head meta charsetUTF-8 / titleStyle绑定/title script src../js/vue.js/script style .static { border: 1px solid black; width: 100px; height: 100px; } /style /head body div idapp h1{{msg}}/h1 !-- 静态写法 -- div classstatic stylebackground-color: green静态写法/div br / !-- 动态写法字符串形式 -- div classstatic :stylemyStyle动态写法字符串形式/div br / !-- 动态写法对象形式 -- div classstatic :style{background-color: gray}动态写法1对象形式/div br / div classstatic :stylestyleObj1动态写法2对象形式/div br / !-- 动态写法数组形式 -- div classstatic :stylestyleArray动态写法数组形式/div /div script const vm new Vue({ el: #app, data: { msg: Style绑定, myStyle: background-color: gray;, styleObj1: { backgroundColor: green, }, styleArray: [{ backgroundColor: green }, { color: red }], }, }); /script /body