25.VUE学习之-单击和双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
<li v-for="(v,k) in comments">
{{v.id}} - {{v.content}}
<button v-on:click="abc(v.id)">v-on单击事件</button>
<button @click="abc(v.id)">@单击事件</button><!--@和上面的v-on效果是一样的-->
<button @dblclick="abc(v.id)">@dblclick双击事件</button><!--@和上面的v-on效果是一样的-->
</li>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
//当前用户输入内容
comments: [
{id: 2, content: 'HDPHP'},
{id: 4, content: 'HDCMS'},
{id: 1, content: '后盾人'},
{id: 3, content: '向军老师'},
]
},
methods: {
abc(k){
console.log(k);
},
}
});
</script>
</body>
</html>
效果:
25.VUE学习之-单击和双击事件的更多相关文章
- JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次单击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示 出现问 ...
- [转] Ext Grid （ExtJs）上的单击以及双击事件
例1: 1.双击 var cb = new Ext.grid.RowSelectionModel({ singleSelect:true //如果值是false,表明可以选择多行:否则只能选择一行 } ...
- GridView/DataGrid行单击和双击事件实现代码_.Net教程
功能: 单击选中行,双击打开详细页面 说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应 ...
- 禁用CMFCRibbonApplicationButton的单击和双击事件
为了禁用CMFCRibbonApplicationButton的单击和双击事件,我重载了CMFCRibbonApplicationButton如下: 1. MyRibbonApplicationBut ...
- jquery处理单击和双击事件
今天做div点击时,需要用到同一div的单击和双击事件,出现问题如下 例子: Html <body> <div id="div_1">单击双击我</d ...
- Android 自定义View实现单击和双击事件
自定义View, 1. 自定义一个Runnable线程TouchEventCountThread , 用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面 ...
- 支持行单击、双击事件的GridView和DataList控件（译）
支持行单击.双击事件的GridView和DataList控件(译) 让GridView 和 DataList 控件响应鼠标单击.双击事件.并且,使用 ClientScript.Regi ...
- [Javasript] 同时实现单击和双击事件
在同一个元素上同时绑定单击和双击事件: JavaScript <script type="text/javascript"> var timer = 0; var de ...
- unity3D 游戏物体同时绑定单击、双击事件
前言 在unity中我们常用的获取鼠标点击的方法有 在3D场景中,一般用在Update方法中,每一帧调用 void Update(){ )){ Debug.log("鼠标左键点击" ...
随机推荐
- Windows进程通信之一看就懂的匿名管道通信
目录 进程通信之一看就懂的匿名管道通信 一丶匿名管道 1.1何为匿名管道 1.2创建匿名管道需要注意的事项 1.3 创建匿名管道需要的步骤 1.4代码例子 1.5代码运行截图 进程通信之一看就懂的匿名 ...
- 性能测试学习第四天_Loadrunner概述
1.Loadrunner的组成部分 ·脚本生成器VuGen:virtual user generator ·压力控制器Controller,License主要在这里控制 ·结果分析软件Analysis ...
- C#数据库(MSSQL)帮助类
/// <summary> /// 数据库帮助类 /// <author>Devin</author> /// </summary> public se ...
- Error: connect ECONNREFUSED 127.0.0.1:8080
Error: connect ECONNREFUSED 127.0.0.1:8080 at Object.exports._errnoException (util.js:1018:11) ...
- wcf_消息通信模式(下) 双工通讯
原文:[老老实实学WCF] 第十篇 消息通信模式(下) 双工 第十篇 消息通信模式(下) 双工 在前一篇的学习中,我们了解了单向和请求/应答这两种消息通信模式.我们知道可以通过配置操作协定的IsOne ...
- jar 压缩 解压 war包
Win+R 输入cmd进入命令行,进入到源码所在目录.所用工具,jdk自带的jar.exe 打包命令:jar -cvf xxx.war * 解包命令: jar -xvf xxx.war * 参数 说明 ...
- JAVA爬虫---验证码识别技术（一）
Python中有专门的图像处理技术比如说PIL,可以对验证码一类的图片进行二值化处理,然后对图片进行分割,进行像素点比较得到图片中的数字.这种方案对验证码的处理相对较少,运用相对普遍,很多验证码图片可 ...
- 数据库（DBUtils）
DBUtils和连接池 今日内容介绍 u DBUtils u 连接池 第1章 DBUtils 如果只使用JDBC进行开发,我们会发现冗余代码过多,为了简化JDBC开发,本案例我们讲采用apache c ...
- 微信小程序时间处理问题
环境: 开发环境: 1. Mac OS 10.12.5 2. 微信Web开发者工具 v0.18.182200 测试环境: 1. iPhone 7 2. iOS 10.3.2 3. 微信 6.5.9 问 ...
- weexpack 创建项目, 打包Android 和 ios
1: 首先确保 node.js版本大于6.0, 不然使用 weexpack 时会报错(部分使用es6语言,node版本太低不支持es6) 下面所有都是命令行执行的命令 2: 全局安装 weexpack ...