Vue之v-on绑定监听事件

vue一个重要的指令就是 v-on，它用来绑定监听器

在button按钮上，使用v-on:click给该元素绑死了一个点击事件

在普通元素上，v-on可以监听原生的DOM事件，比如：click、dbclick、keyup、mousemove等。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Vue v-on 绑定事件监听器</title></head><body><div id="app"><p v-if="show">这是隐藏的文本</p><button v-on:click="handleClose">点击隐藏</button></div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app = new Vue({el:'#app',data:{show : true},methods: {handleClose:function (){this.close();   },close:function(){this.show = false;}}})
</script></body>
</html>

表达式除了方法名之外，也可以是一个内联语句：

<div id="app"><p v-if="show">这是隐藏的文本</p><button v-on:click="show = false">点击隐藏</button></div>

Vue之v-on绑定监听事件相关推荐

PyQt5 技术篇-QComboBox下拉框绑定监听事件实例演示
currentIndexChanged.connect() 用于监听当前选择的索引改变. 即,选择的内容改变就会触发! items = ["脚本录制", "脚本回放&qu ...
vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
chrome 技巧篇-如何查看web元素绑定的监听事件
第一步:首先通过 F12 进入开发者工具页面. 第二步:选中 Elements 页签内对应的元素,可以用一个按钮来试一试. 第三步:右边选择 Event Listeners 页签,并取消勾选 Ance ...
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？
[vue] vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么? 需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏个人简介我是歌谣,欢迎和大家一起交流前后 ...
常用的监听事件(android)
刚发布过Toast,为了是自己记得牢固一些在这里写几个监听事件分别写出不同位置的Toast 监听常用的有四种第一种:内部类作为事件监听器类 xml中代码 <RelativeLayout xm ...
nginx监听事件流程
在前面的几篇文章中已经分析了master进程.work进程的初始化流程.但一直没有分析监听socket的创建流程,nginx服务器只有在创建socket, 绑定socet,监听socket执行完成后, ...
Vue-1-实例、渲染、监听事件
一.概念渐进的意思是我们可以用vue只写一个页面,慢慢的把整个项目用vue替换掉结合了React和Angular,也有自己的优点二.Vue实例页面的值都是从data里来的,随data值的改变而 ...
Cocos 发射和监听事件事件派送(TypeScript)
监听和发射事件监听事件事件处理是在节点(cc.Node)中完成的.对于组件,可以通过访问节点 this.node 来注册和监听事件. 事件监听函数 on 可以传第三个参数 target,用于绑定响 ...
【冷知识】获取网页所有的监听事件类型、方法。请认准getEventListeners
获取事件列表 getEventListeners(window)//获取window绑定的所有监听事件列表//----------------------------------------getEv ...

Vue之v-on绑定监听事件

Vue之v-on绑定监听事件相关推荐

最新文章

热门文章