电商系统前后端开发(Vue+SSM)(4) - vue 改变样式

tech2022-10-24  113

1 class 动态绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 测试案例</title> <style> .mydiv{ width: 400px; height:220px; background-color: green; } .red{ background-color: red; } .yellow{ background-color: yellow; } </style> </head> <body> <div id="app"> <div v-bind:class="{red:temp}" class="mydiv"></div> <div class="mydiv"></div> <div class="mydiv"></div> <button type="button" @click="temp=!temp">点击</button> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script> new Vue({ el:'#app', data:{ temp:false, }, }) </script> </html>

2 加入 computed

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 测试案例</title> <style> .mydiv { width: 400px; height: 100px; background-color: green; } .red { background-color: red; } .yellow { background-color: yellow; } .myWidth { width: 450px; height: 50px; } </style> </head> <body> <div id="app"> <div v-bind:class="{red:temp}" class="mydiv"></div> <hr/> <div :class="myClassStyle"></div> <hr/> <div class="mydiv"></div> <hr/> <button type="button" @click="temp=!temp">点击</button> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script> new Vue({ el: '#app', data: { temp: false, }, computed: { // 返回一个对象,对象里放着多个键值对 myClassStyle: function () { return { red: this.temp, myWidth: this.temp, } } } }) </script> </html>

最新回复(0)