目录
对象的形式绑定:
数组的形式绑定:
内联样式Style
对象的形式绑定:
可以看到class中有两个值
数组的形式绑定:
可以看到也有两个值
内联样式Style
style样式设置成功
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title>Title</title> <style> .one{ background: pink; width: 100px; height: 100px; text-align: center; line-height: 100px; } </style> </head> <body> <div class="vuePro"> <!-- class属性对象形式属性绑定 --> <div :class="{one:isOne,two:isTwo}"></div> <!-- class属性数组形式属性绑定 --> <span :class='[oneArr,twoArr]'></span> <!-- 样式绑定之内联样式Style --> <a :style="styles"></a> </div> </body> <script> new Vue({ el:".vuePro", data:{ isOne:true, isTwo:true, oneArr:"one", twoArr:"two", styles:{ border: '1px solid green', width: '200px', height: '100px' } } }); </script> </html>