首页 > 代码库 > vuejs中v-bind绑定class时的注意事项
vuejs中v-bind绑定class时的注意事项
关于v-bind绑定class的实例
作用：可用于不同样式之间的切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="https://unpkg.com/vue"></script> 7 <style> 8 .static { 9 font-size: 120px; 10 width: 600px; 11 margin: 0 auto; 12 background-color: yellow; 13 height: 120px; 14 line-height: 120px; 15 text-align: center; 16 } 17 18 .class-a { 19 color: #FF0000; 20 } 21 22 .class-b { 23 text-decoration: underline; 24 } 25 </style> 26 </head> 27 28 <body> 29 <div id="app"> 30 <div v-bind:class="classObject"> 31 关于class的绑定 32 </div> 33 </div> 34 <script> 35 var vm = new Vue({ 36 el: ‘#app‘, 37 data: { 38 classObject: { 39 //‘class-a‘,不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成‘class-a‘,用引号括起来。 40 //否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。 41 ‘class-a‘:true, 42 ‘class-b‘: false 43 } 44 } 45 }); 46 </script> 47 </body> 48 49 </html>
vuejs中v-bind绑定class时的注意事项
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。