admin 管理员组文章数量: 887031
【v
本文代码主要讲述了v-on绑定事件函数传参，一个元素绑定多个事件的两种写法，一个事件绑定多个函数的两种写法，修饰符的使用。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><!-- <button v-on:click="myclick('hello','world','你好世界',$event)" >button1</button> --><button @click="myclick('hello','world','你好世界',$event)">点我text</button><!-- v-on绑定多个事件教程里这样子写，但是貌似已经不支持这样子的写法了，内联方式下事件处理器只能绑定一个方法，要是想要绑定多个事件，用下面第二行的方式--><!-- <button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来</button> --><button @mouseenter="onEnter" @mouseleave="onLeave">鼠标进来</button><!-- 一个事件绑定多个函数，按顺序执行，这里分隔函数可以用逗号也可以用分号--><button @click="a(),b()">点我ab</button><button @click="one()">点我onetwothree</button><!-- v-on修饰符 .stop .prevent .capture .self 以及指定按键.{keyCode|keyAlias} --><!-- 这里的.stop 和 .prevent也可以通过传入&event进行操作 --><!-- 全部按键别名有：enter tab delete esc space up down left right --><form @keyup.delete="onKeyup" @submit.prevent="onSubmit"><input type="text" placeholder="在这里按delete"><button type="submit">点我提交</button></form></div><script src="vue221.js"></script><script>var vm = new Vue({el:"#app",methods:{//这里是es6对象里函数写法a(){console.log("a");},b(){console.log("b");},one(){console.log("one");this.two();this.three();},two(){console.log("two");},three(){console.log("three");},myclick(msg1,msg2,msg3,event){console.log(msg1+msg2+"--"+msg3);console.log(event);},onKeyup(){console.log("you press 'delete'");},onSubmit(){console.log("sumited");},onEnter(){console.log("mouse enter");},onLeave(){console.log("mouse leave");}}});</script>
</body>
</html>
本文标签： v
版权声明：本文标题：【v 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687562215h116114.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论