千峰商城-springboot项目搭建-24-vue的style绑定
1.复杂的style绑定：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <!--当使用v-bind绑定内联样式时： 1.使用{}定义style样式，才能获取data中的值，{}要遵循JSON格式 2.{}中不再使用style样式属性名“font-size”，而是使用对应的js属性名“fontSize” --> <div :style="{color:colorname, fontSize: fontsize+'px'}">千峰java-wh2022</div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#container", data:{ colorname:"green", fontsize:30 } }); </script> </body> </html>
2.字符串绑定内联样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <!--当使用v-bind绑定内联样式时： 1.使用{}定义style样式，才能获取data中的值，{}要遵循JSON格式 2.{}中不再使用style样式属性名“font-size”，而是使用对应的js属性名“fontSize” --> <div :style="{color:colorname, fontSize: fontsize+'px'}">千峰java-wh2022</div> <!--我们可以直接为style绑定一个data中定义好的内联样式字符串--> <div :style="mystyle1">千峰-java</div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#container", data:{ colorname:"green", fontsize:30, mystyle1:"color:orange;font-size:45px" } }); </script> </body> </html>
3.对象类型绑定内联样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <!--当使用v-bind绑定内联样式时： 1.使用{}定义style样式，才能获取data中的值，{}要遵循JSON格式 2.{}中不再使用style样式属性名“font-size”，而是使用对应的js属性名“fontSize” --> <div :style="{color:colorname, fontSize: fontsize+'px'}">千峰java-wh2022</div> <!--我们可以直接为style绑定一个data中定义好的内联样式字符串--> <div :style="mystyle1">千峰-java</div> <!--我们可以直接为style绑定一个data中定义好的内联样式对象--> <div :style="mystyle2">千峰-java</div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#container", data:{ colorname:"green", fontsize:30, mystyle1:"color:orange;font-size:45px", mystyle2:{ color:"blue", fontSize:"60px" } } }); </script> </body> </html>
4.联合内联样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <!--当使用v-bind绑定内联样式时： 1.使用{}定义style样式，才能获取data中的值，{}要遵循JSON格式 2.{}中不再使用style样式属性名“font-size”，而是使用对应的js属性名“fontSize” --> <div :style="{color:colorname, fontSize: fontsize+'px'}">千峰java-wh2022</div> <!--我们可以直接为style绑定一个data中定义好的内联样式字符串--> <div :style="mystyle1">千峰-java</div> <!--我们可以直接为style绑定一个data中定义好的内联样式对象--> <div :style="mystyle2">千峰-java</div>
<!--可以在同一个style上通过数组引用多个内联样式的对象--> <div :style="[mystyle2,mystyle3]">千峰-java</div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#container", data:{ colorname:"green", fontsize:30, mystyle1:"color:orange;font-size:45px", mystyle2:{ color:"blue", fontSize:"60px" }, mystyle3:{ textShadow:"orange 3px 3px 3px" } } }); </script> </body> </html>
