vue.js绑定事件侦听器示例[基于v-on事件绑定]

本文以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 ' titlewww.jb51.net绑定事件侦听器/title！-vue . js-script src=' http :3359 cdn . bootscs.com/vue/2 . 5 . 16/vue . min . js '/script/headline id=' app ' PV-if=' show '这是一段文字/P button v-: click=' handleclose ' click hide/button/div/body/html script//当data show的值为true时，将插入P元素，当它为false时，它var myDATa={ show : true }；Var app=newvue ({el:' # app '，data: mydata，//在普通元素上，v-on除了click、dbclick、keyup、mousemove等可以监听原生DOM事件。表达式可以是一个方法名，它写在vue实例的methods属性中，并且是函数的形式。函数中的this指向当前vue实例本身，因此数据可以以this.xxx的形式直接访问或修改，例如实例中的this.show=false数据显示被更改为false，因此当单击按钮时，文本p元素被移除。方法： { handleClose : function(){//this。show=false//在handleclose方法中，通过close()直接调用close函数。该示例是多余的，但仅用于演示其用法。这个。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=' http :https://cdn . bootss.com/vue/2 . 5 . 16/vue . min . js '/script/Head body div id=' test ' { msg } } p v-for=' val inar ' { val。a } }/p a href=' JavaScript : void(0)' rel=' external nofollow ' v-: click=' tap ' point me/a/Div/body/html script//window . onload=function(){ varapp 2=new vue({ El : ' # test ')，data: {msg: '润源装饰'，msg13360' Home装饰' new Date ')，msg2:'lianxi '，show 3:arr . unshift({ a : ' new ' })} })//}/脚本这个例子可以响应鼠标点击自动添加元素，感兴趣的朋友可以使用HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun来测试效果。

希望本文对vue.js程序的设计有所帮助。