Vue中的样式绑定
hello world切換變色
第一種樣式和數據綁定的方案
借助class和一個對象的形式，來做樣式和數據綁定
語法：class的對象綁定
class可以和一個數組相綁定，數組里面寫一個內容，內容就相當于變量，class會顯示變量顯示的內容，既然是一個數組，可以寫一個變量也可以寫多個變量
style第一種用戶對象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue中的樣式綁定</title><!--引入vue.js庫--><script src="../vue.js"></script> </head><body> <!--vue接管的div--> <div id="root"><div :style="styleObj" @click="handleDivClick">hello world</div> </div><script>var vm = new Vue({el: '#root',data: {styleObj: {color: "red"}},methods: {handleDivClick: function () {this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";}}}); </script> </body> </html>style第二種方式數組
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue中的樣式綁定</title><!--引入vue.js庫--><script src="../vue.js"></script> </head> <body> <!--vue接管的div--> <div id="root"><div :style="[styleObj]" @click="handleDivClick">hello world</div> </div><script>var vm = new Vue({el: '#root',data: {styleObj: {color: "red"}},methods: {handleDivClick: function () {this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";}}}); </script> </body> </html>總結
- 上一篇： druid去掉广告
- 下一篇： js中组装拼接json对象，通过java