初识 Vue（11）---(Vue 中的事件绑定)
生活随笔
收集整理的這篇文章主要介紹了
初识 Vue（11）---(Vue 中的事件绑定)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue 中的事件綁定
案例：點擊 Hello World ，從黑變紅，再次點擊，從紅變黑...
通過 class?來實現 頁面效果的變更
方法一：（通過對象）對象綁定
??<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue 中的事件綁定</title><script src="./vue.js"></script><style>.activated{color: red;}</style> </head> <body><div id="app"><div @click="handleDivClick":class="{activated:isActivated}"> Hello World</div><script>var vm = new Vue({el:"#app",data:{isActivated:false},methods: {handleDivClick:function(){this.isActivated = !this.isActivated;}}})</script> </body> </html>輸出：
點擊
再點擊
方法二：（通過數組）將 activated 放置在數組中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue 中的事件綁定</title><script src="./vue.js"></script><style>.activated{color: red;}</style> </head> <body><div id="app"><div @click="handleDivClick":class="[activated]"> Hello World</div></div> <script>var vm = new Vue({el:"#app",data:{activated:""},methods: {handleDivClick:function(){if(this.activated === "activated"){this.activated = "";}else{this.activated="activated";//this.activated = this.activated === "activated" ? "" : "activated"}}}})</script> </body> </html>補充：
動態的給一個DOM元素添加或刪除不同的類，從而實現頁面效果的變更
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue 中的事件綁定</title><script src="./vue.js"></script><style>.activated{color: red;}</style> </head> <body><div id="app"><div @click="handleDivClick":class="[activated,activatedOne]"> Hello World</div></div> <script>var vm = new Vue({el:"#app",data:{activated:""activatedOne:"activated-one"},methods: {handleDivClick:function(){if(this.activated === "activated"){this.activated = "";}else{this.activated="activated";//this.activated = this.activated === "activated" ? "" : "activated"}}}})</script> </body> </html>輸出：類從 activated 變更為 activated-one
?
通過 style 來實現 頁面效果的變更
方法一：（通過對象）第一次為 black,故顯示為黑色，當等于 black 則返回 red,則第二次顯示紅色，返回black...達到顏色變更的目的
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue 中的事件綁定</title><script src="./vue.js"></script> </head> <body><div id="app"><div :style="styleobj" @click="handleDivClick"> Hello World</div></div> <script>var vm = new Vue({el:"#app",data:{styleobj:{color:"black"}},methods: {handleDivClick:function() {this.styleobj.color = this.styleobj.color ==="black"?"red" :"black" ;}}})</script> </body> </html>輸出：
點擊
再點擊
方法二：（通過數組）（只需將 styleobj 放入數組即可）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue 中的事件綁定</title><script src="./vue.js"></script> </head> <body><div id="app"><div :style="[styleobj]" @click="handleDivClick"> Hello World</div></div> <script>var vm = new Vue({el:"#app",data:{styleobj:{color:"black"}},methods: {handleDivClick:function() {this.styleobj.color = this.styleobj.color ==="black"?"red" :"black" ;}}})</script> </body> </html>如果 style 后面跟著一個數組，DIV 的樣式由數組里的 對象 所決定，這個對象有 color:"black";所以 DIV 顯示黑色，第一次為 black,故顯示為黑色，當等于 black 則返回 red,則第二次顯示紅色，返回black...達到顏色變更的目的。
?
總結
以上是生活随笔為你收集整理的初识 Vue（11）---(Vue 中的事件绑定)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： elasticsearch 性能调优（转
- 下一篇： html5倒计时秒杀怎么做,vue 设