Vue.js 样式绑定
可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组
为 v-bind:class 设置一个对象,从而动态的切换 class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .pink{background:pink} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <div v-bind:class="{pink:show}">我是个框框</div> </div> <script> var vm=new Vue({ el: "#demo", data: { show:true } }) //vm监听事件变化,第一个参数是新值,第二个参数是旧值 //kilometers值发生改变时,执行回调 vm.$watch("kilometers",function(newVal,oldVal){ document.getElementById ("info").innerHTML = "修改前值为: " + oldVal + ",修改后值为: " + newVal; }) </script>
也可以在对象中传入更多属性用来动态切换多个 class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .pink{background:pink} .blue{background: #abcdef;} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <div v-bind:class="{pink:show,blue:show2}">我是个框框</div> </div> <script> var vm=new Vue({ el: "#demo", data: { show:false, show2:true } }) //vm监听事件变化,第一个参数是新值,第二个参数是旧值 //kilometers值发生改变时,执行回调 vm.$watch("kilometers",function(newVal,oldVal){ document.getElementById ("info").innerHTML = "修改前值为: " + oldVal + ",修改后值为: " + newVal; }) </script>
也可以直接绑定数据里的一个对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .pink{background:pink} .blue{background: #abcdef;} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <div v-bind:class="myclass">我是个框框</div> </div> <script> var vm=new Vue({ el: "#demo", data: { myclass:{ "pink":true, "blue":false } } }) //vm监听事件变化,第一个参数是新值,第二个参数是旧值 //kilometers值发生改变时,执行回调 vm.$watch("kilometers",function(newVal,oldVal){ document.getElementById ("info").innerHTML = "修改前值为: " + oldVal + ",修改后值为: " + newVal; }) </script>
也可以在这里绑定返回对象的计算属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:orange} .pink{background:pink} .blue{background: #abcdef;} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <div v-bind:class="myclass">我是个框框</div> </div> <script> var vm=new Vue({ el: "#demo", data: { "pink":true, "blue":{ value:true, type:"real" } }, //计算属性并返回对象 computed:{ myclass:function(){ return { base:true, pink:this.pink && !this.blue.value,//粉色为true,蓝色value为false,则显示粉色 blue:this.blue.value && this.blue.type==="real"//蓝色value为true,且type为real,则显示蓝色 } } } }) </script>
可以把一个数组传给 v-bind:class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:orange} .pink{background:pink} .blue{background: #abcdef;} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <div v-bind:class="[baseCls,pinkCls,blueCls]">我是个框框</div> </div> <script> var vm=new Vue({ el: "#demo", data: { "baseCls":"base", "pinkCls":"pink", "blueCls":"blue" } }) </script>
使用三元表达式来切换列表中的 class :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:#fff} .pink{background:pink} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <div v-bind:class="[baseCls,isPink?pinkCls:""]">我是个框框</div> </div> <script> var vm=new Vue({ el: "#demo", data: { "baseCls":"base", "pinkCls":"pink", "isPink":true } }) </script>
这段代码表示颜色白色始终存在,当isPink为真时,背景颜色显示粉色
可以在 v-bind:style 直接设置样式:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:#fff} .pink{background:pink} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <div v-bind:style="{color:mycolor,fontSize:myfontSize,backgroundColor:mybg}">我是个框框</div> </div> <script> var vm=new Vue({ el: "#demo", data: { "mycolor":"#fff", "myfontSize":"16px", "mybg":"pink" } }) </script>
也可以直接绑定到一个样式对象,让模板更清晰
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:#fff} .pink{background:pink} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <div v-bind:style="mystyle">我是个框框</div> </div> <script> var vm=new Vue({ el: "#demo", data: { mystyle:{ "color":"#fff", "font-size":"16px", "background":"#abcdef" } } }) </script>
可以使用数组将多个样式对象应用到一个元素上
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:#fff} .pink{background:pink} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <div v-bind:style="[mystyle,mystyle2]">我是个框框</div> </div> <script> var vm=new Vue({ el: "#demo", data: { mystyle: { "color": "#fff", "font-size": "16px", "background": "#abcdef" }, mystyle2:{ "font-weight":"bold" } } }) </script>
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀
这个功能实在是太耐思了!!!