目录
对象的形式绑定:
数组的形式绑定:
内联样式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>