VUE3 之 样式绑定
1. 概述
老话说的好:脚踏实地,从小事做起。
言归正传,今天我们来聊聊 VUE3 的样式绑定。
2. 样式绑定
2.1 样式例子
<style> /* 颜色 */ .color-red { color: red; } /* 字体 */ .font-size-25 { font-size: 25px; } /* 居中 */ .center { text-align: center; } </style>
2.2 直接写 class 的值
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 template : '<div class="color-red">hello</div>' }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
2.3 class 绑定字符串数据
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { myColor : "color-red" } }, template : '<div :class="myColor">hello</div>' }); const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
2.4 class 绑定对象数据
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { myColorObject : { "color-red" : true, "font-size-25" : true } } }, template : '<div :class="myColorObject">hello</div>' }); const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
myColorObject 对象中,值为 true 代表使用此样式,为 false 代表不使用
2.5 class 绑定数组数据
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { myColorArr : ["color-red", "font-size-25" , {center : true}], } }, template : '<div :class="myColorArr">hello</div>' }); const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
myColorArr 数组中包含的样式都会被使用
2.6 直接写 style 的值
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 template : ` <div style="color:yellow;"> hello </div> ` }); const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
2.7 style 绑定字符串数据
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { myStyle : "color:yellow;" } }, template : ` <div :style="myStyle"> hello </div> ` }); const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
2.8 style 绑定对象数据
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { myStyleObject : { "color" : "blue", "font-size": "25px" } } }, template : ` <div :style="myStyleObject"> hello </div> ` }); const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
3. 综述
今天聊了一下 VUE3 的 样式绑定,希望可以对大家的工作有所帮助
欢迎帮忙点赞、评论、转发、加关注 :)
关注追风人聊Java,每天更新Java干货。
4. 个人公众号
追风人聊Java,欢迎大家关注