|
阅读：5474回复：3
Vue :class、Style 动态样式绑定实现 toggleClass<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="../node_modules/vue/dist/vue.js"></script> <style> .active { color: rebeccapurple; } </style> </head> <body> <div id="app"> <div @click="toggleClass" :class="{active:isActive}">Swish Swish</div> </div> <script> let vm = new Vue({ el: "#app", data: { isActive: false }, methods: { toggleClass: function() { this.isActive = !this.isActive; } } }); </script> </body> </html> |
|
|
沙发#
发布于：2021-03-31 16:08
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="../node_modules/vue/dist/vue.js"></script> <style> .active { color: rebeccapurple; } </style> </head> <body> <div id="app"> <h1 @click="addClass" :class="[activated]">Swish Swish</h1> </div> <script> let vm = new Vue({ el: "#app", data: { activated: "" }, methods: { addClass: function() { this.activated = this.activated === "active" ? "" : "active"; } } }); </script> </body> </html> |
|
|
板凳#
发布于：2021-03-31 16:09
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="../node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1 @click="changeClass" :style="styleObj">Swish Swish</h1> </div> <script> let vm = new Vue({ el: "#app", data: { styleObj: { color: "black" } }, methods: { changeClass: function() { this.styleObj.color = this.styleObj.color === "black" ? "rebeccapurple" : "black"; } } }); </script> </body> </html> |
|
|
地板#
发布于：2021-03-31 16:09
|
|
