Vue中的样式绑定

2024-11-04 技术教程

class样式绑定：

数组变量的绑定

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script>  <style type="text/css"> .activated{ color: red; font-weight: bold; } </style></head><body>  <div id="app"> <div @click="handleDivClick" :class="[activated]"><h2>hello world</h2></div> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { activated: "" }, methods: { handleDivClick: function() { if (this.activated === "activated") { this.activated = ""; }else { this.activated = "activated"; } } } }) </script></body></html>

style绑定：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script> </head><body>  <div id="app"> <div : @click="handleDivClick"><h2>hello world</h2></div> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { styleObj: { color: "black" } }, methods: { handleDivClick: function() { if (this.styleObj.color == "black") { this.styleObj.color = "red" }else { this.styleObj.color = "black" } } } }) </script></body></html>

style数组绑定：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script> </head><body>   <div id="app"> <div : @click="handleDivClick"><h2>hello world</h2></div> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { styleObj: { color: "black", border:"1px solid red" } }, methods: { handleDivClick: function() { if (this.styleObj.color == "black") { this.styleObj.color = "red" }else { this.styleObj.color = "black" } } } }) </script></body></html>