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 中的事件绑定)相关推荐

  1. vue与elementUI中给el-input绑定键盘按键--按键修饰符

    vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...

  2. java事件绑定,Java编程GUI中的事件绑定代码示例

    程序绑定的概念: 绑定指的是一个方法的调用与方法所在的类(方法主体)关联起来.对java来说,绑定分为静态绑定和动态绑定:或者叫做前期绑定和后期绑定 静态绑定: 在程序执行前方法已经被绑定,此时由编译 ...

  3. JS之事件处理（一）--事件概述、非IE浏览器/IE浏览器中的事件绑定、解决浏览器事件绑定兼容性问题

    一.概述 描述:事件本质是一种交互操作,事件通常与函数配合使用,当事件发生时函数才会执行 事件是由三部分组成的:事件源 事件类型 事件处理程序 事件源:事件被触发的对象–谁 事件类型:如何触发 什么事 ...

  4. vue.js中的事件绑定-01笔记

    之前发生了一个错误,事件绑定一直不成功,就是下面的错误代码 <div id="app">当前计数:{{count}}<button v-if="0&qu ...

  5. Vue第一部分(3)：事件绑定与标签属性赋值

    1.事件绑定:v-on指令  基本使用 在Vue中通过 v-on 指令给页面元素绑定事件. 语法: v-on:事件名="js代码片段或函数" //事件名=事件属性-on 比如:cl ...

  6. JS中的事件绑定、取消、兼容问题

    一.事件绑定 1.on+事件类型 var div = document.getElementById('dv')// 1 on+事件类型 (同一点击事件只能绑定一次,绑定多次以最后一次为准)div.o ...

  7. vue data属性中的值绑定到dom上的一些问题

    1.html属性绑定既有字符串又有变量的写法 <a :href="`tel:${item.mobile}`"><img class="phone-ico ...

  8. 微信小程序中取消事件绑定用变量来控制如何取消事件绑定

    因为语音输入有的语言不能识别,所以要禁用掉按钮在某些情况. 而由于这个录制语音的事件是touchStart,touchEnd,用button的disabled是禁用不掉的,我就想着把这个事件给解绑了, ...

  9. 前端学习（3208）：react中的事件绑定

最新文章

  1. 真正的 Tornado 异步非阻塞
  2. 浅谈线上德州扑克平台的公平性
  3. ABP学习 解决：Update-Database : 无法将“Update-Database”项识别为 cmdlet、函数、脚本文件或可运行程序的名称的问题...
  4. Windows 10 Edge 浏览器续航对比火狐/Chrome
  5. BZOJ4825: [Hnoi2017]单旋（Splay）
  6. 网站如何进行渠道跟踪_网站如何进行搜索引擎优化?
  7. odoo12 日历模块_日历-ODOO ERP界面布局与操作说明|ODOO 13教程
  8. word整个表格首行缩进_Word排版对不齐？别忘了这个明星按键
  9. 年底了，按约定把2021 Go面试八股整理全了
  10. python能查询MySQL视图_python - 在使用Django的视图中，如何从mysql检索数据，并显示它_python_酷徒编程知识库...
  11. 女人选择安逸一点还是拼搏一点
  12. Linux下解压rar格式文件
  13. 红帽发布虚拟化策略 产品即将上市
  14. Apache常见报错问题
  15. ubuntu下vlc-android编译
  16. ipad上的html编辑器,它让我开始尝试在 iPad 上写作：MWeb for iOS 使用体验
  17. linux中dp源代码分析,contrail源代码分析.pdf
  18. html5怎么把表格边框设为0,css表格边框怎么设置
  19. 使用VCS 仿真后，通过DVE 观察波形，多维数据显示not load问题及解决方案
  20. 利用ajax从jsp中返回的字符串时出现回车符号解决办法

热门文章

  1. ASP.NET 页生命周期
  2. 选择日期保存报错Invalid JSON input: Cannot deserialize value of type `java.util.Date` from String......
  3. 蓝桥杯第八届省赛JAVA真题----分巧克力
  4. 蛮力法在排序算法中的应用（JAVA）--选择排序、冒泡排序
  5. vscode弹出cmd_先看看 VS Code Extension 知识点，再写个 VS Code 扩展玩玩
  6. java中p.name_spring如何使用命名空间p简化bean的配置
  7. jq 下拉加载每次只执行一次_记一次 无限列表 滚动优化
  8. centos命令行安装mysql_Centos下安装mysql 总结
  9. python全栈要学什么_python全栈要学什么 python全栈学习路线
  10. springmvc通过@Value注解读取Properties配置文件的值，junit测试可以取到值，但是在业务中无法读取