vue.js绑定事件监听器示例【基于v-on事件绑定】
2018-07-07 11:56
946 查看
本文实例讲述了vue.js绑定事件监听器。分享给大家供大家参考,具体如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>www.jb51.net 绑定事件监听器</title> <!-- Vue.js --> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div id="app"> <p v-if="show">这是一段文本</p> <buttton v-on:click="handleClose">点击隐藏</buttton> </div> </body> </html> <script> //当数据show的值为true时,p元素会被插入,为false时会被移除 var myData = { show:true }; var app = new Vue({ el:'#app', data:myData, //在普通元素上,v-on可以监听原生的DOM事件,除了click外,还有dbclick、keyup、mousemove等。表达式可以是一个方法名,这些方法都写在vue实例的methods属性内,并且是函数的形式,函数内的this指向的是当前vue实例本身,因此可以直接使用this.xxx的形式来访问或者修改数据,如实例中的this.show = false;把数据show修改为了false,所以点击按钮时,文本p元素就被移除了 methods:{ handleClose:function () { // this.show = false //在handleClose方法内,直接通过close()调用了close函数。在示例中是多此一举的,只是用于演示它的用法 this.close() }, close:function () { this.show = false } } }) </script>
使用本站HTML/CSS/JS在线运行测试工具:http://tools.jb51.net/code/HtmlJsRun,可得到如下测试运行效果:
再来看一个例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div id="test">{{msg}} <p v-for="val in arr"> {{val.a}} </p> <a href="javascript:void(0)" rel="external nofollow" v-on:click="tap">点我</a> </div> </body> </html> <script> // window.onload= function(){ var app2 = new Vue ({ el:"#test", data:{ msg:'润元装饰', msg1:"家装"+new Date(), msg2:'lianxi', show:true, arr:[ {a:'bb'}, {a:'cc'} ] }, methods:{ tap : function(){ this.arr.unshift({a:'new'}) } } }) // } </script>
该示例可响应鼠标点击自动增加元素,感兴趣的朋友可以使用HTML/CSS/JS在线运行测试工具:http://tools.jb51.net/code/HtmlJsRun测试一下效果。
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- vue.js绑定事件监听器(v-on)
- Vue.js之事件的绑定(v-on: 或者 @ )
- Vue.js之事件的绑定(v-on: 或者 @ )
- 浅谈Vue.js 组件中的v-on绑定自定义事件理解
- 对Vue.js之事件的绑定(v-on: 或者 @ )详解
- Vue.js 组件中的v-on绑定自定义事件理解
- 关于js动态生成元素,注册(绑定)的事件失效的解决(on)
- JS实现为动态添加的元素增加事件功能示例【基于事件委托】
- jQuery新的事件绑定机制on()示例应用
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
- js 事件绑定on()的用法,以及对于其他绑定事件的比较
- 关于js动态生成元素,注册(绑定)的事件失效的解决(on)
- vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
- js 绑定键盘鼠标事件示例代码
- 基于vue.js中事件修饰符.self的用法(详解)
- JS动态生成HTML时,on不能绑定事件
- [TOP]原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
- vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
- vue中v-on绑定自定事件
- js事件绑定的几种方式与on()、bind()的区别