2021-7-7 VUE筆記2
阿新 • • 發佈：2021-07-07
Vue的動態樣式例項1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .active{ border: 2px solid darkred; width: 100px; height: 100px; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <View Codebody> <div id="app"> <input type="button" value="aaa" @click="handle" name=""> <div :class="{active:vis}"></div> </div> <script> Vue.config.keyCodes.a=65; new Vue({ el: '#app', data: { vis:false }, methods:{ handle:function(event){ this.vis=this.vis?false:true; // this.vis=!this.vis; } } }) </script> </body> </html>
Vue的動態樣式例項2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .active{ border: 2px solid darkred; width: 100px; heightView Code: 100px; } .new{ background-color: green; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="aaa" @click="handle" name=""> <div :class="[activeClass,newClass]"></div> </div> <script> Vue.config.keyCodes.a=65; new Vue({ el: '#app', data: { activeClass:'active', newClass:'new' }, methods:{ handle:function(event){ this.newClass=''; } } }) </script> </body> </html>