千峰商城-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>
分类:
千峰商城项目
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)