Vue 中的事件绑定
案例：点击 Hello World ，从黑变红，再次点击，从红变黑...
通过 class 来实现 页面效果的变更
方法一：（通过对象）对象绑定
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的事件绑定</ > < src="./vue.js"></ > <style> .activated{color: red;} </style></head><body> <div id="app"> <div @click="handleDivClick" :class="{activated:isActivated}"> Hello World </div> < > var vm = new Vue({ el:"#app", data:{isActivated:false}, methods: { handleDivClick:function(){ this.isActivated = !this.isActivated; } } }) </ ></body></html>输出：
点击
再点击
方法二：（通过数组）将 activated 放置在数组中
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的事件绑定</ > < src="./vue.js"></ > <style> .activated{color: red;} </style></head><body> <div id="app"> <div @click="handleDivClick" :class="[activated]"> Hello World </div> </div> < > 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" } } } }) </ ></body></html>补充：
动态的给一个DOM元素添加或删除不同的类，从而实现页面效果的变更
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的事件绑定</ > < src="./vue.js"></ > <style> .activated{color: red;} </style></head><body> <div id="app"> <div @click="handleDivClick" :class="[activated,activatedOne]"> Hello World </div> </div> < > 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" } } } }) </ ></body></html>输出：类从 activated 变更为 activated-one
通过 style 来实现 页面效果的变更
方法一：（通过对象）第一次为 black,故显示为黑色，当等于 black 则返回 red,则第二次显示红色，返回black...达到颜色变更的目的
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的事件绑定</ > < src="./vue.js"></ ></head><body> <div id="app"> <div :style="styleobj" @click="handleDivClick"> Hello World </div> </div> < > var vm = new Vue({ el:"#app", data:{ styleobj:{ color:"black" } }, methods: { handleDivClick:function() { this.styleobj.color = this.styleobj.color ==="black"?"red" :"black" ; } } }) </ ></body></html>输出：
点击
再点击
方法二：（通过数组）（只需将 styleobj 放入数组即可）
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的事件绑定</ > < src="./vue.js"></ ></head><body> <div id="app"> <div :style="[styleobj]" @click="handleDivClick"> Hello World </div> </div> < > var vm = new Vue({ el:"#app", data:{ styleobj:{ color:"black" } }, methods: { handleDivClick:function() { this.styleobj.color = this.styleobj.color ==="black"?"red" :"black" ; } } }) </ ></body></html>如果 style 后面跟着一个数组，DIV 的样式由数组里的 对象 所决定，这个对象有 color:"black";所以 DIV 显示黑色，第一次为 black,故显示为黑色，当等于 black 则返回 red,则第二次显示红色，返回black...达到颜色变更的目的。
继续阅读与本文标签相同的文章
-
windows安装mongodb
2026-05-26栏目： 教程
-
Method has too many Body parameters openfeign
2026-05-26栏目： 教程
-
Eclipse中Cannot nest src folder解决方法
2026-05-26栏目： 教程
-
restTemplate重定向问题 &cookie问题
2026-05-26栏目： 教程
-
java ServletContextListener 实现UDP监听
2026-05-26栏目： 教程