<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的样式绑定</title> <script src="../../common/js/vue.js"></script> </head> <body> <div id="app"> <div :style="styleObj" @click="handleDivClick">Hello World</div> <div :style="[styleObj, {fontSize: '20px' }]" @click="handleDivClick">Hello China</div> </div> </body> </html> <script> var vm = new Vue({ el :"#app", data: { styleObj: { color: "black" } }, methods: { handleDivClick: function () { this.styleObj.color = this.styleObj === "black" ? "red" : "black"; } } }) </script>
vue样式的动态绑定
最新推荐文章于 2024-08-23 15:35:36 发布