1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
  6.     <script type="text/javascript" src="../js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="hdcms">
  10.     <li v-for="(v,k) in comments">
  11.         {{v.id}} - {{v.content}}
  12.         <button v-on:click="abc(v.id)">v-on单击事件</button>
  13.         <button @click="abc(v.id)">@单击事件</button><!--@和上面的v-on效果是一样的-->
  14.         <button @dblclick="abc(v.id)">@dblclick双击事件</button><!--@和上面的v-on效果是一样的-->
  16.     </li>
  18. </div>
  19. <script>
  20.     var app = new Vue({
  21.         el: '#hdcms',
  22.         data: {
  23.             //当前用户输入内容
  24.             comments: [
  25.                 {id: 2, content: 'HDPHP'},
  26.                 {id: 4, content: 'HDCMS'},
  27.                 {id: 1, content: '后盾人'},
  28.                 {id: 3, content: '向军老师'},
  29.             ]
  30.         },
  31.         methods: {
  32.             abc(k){
  33.                 console.log(k);
  34.             },
  35.         }
  36.     });
  37. </script>
  38. </body>
  39. </html>

效果:

25.VUE学习之-单击和双击事件的更多相关文章

  1. JS - 解决鼠标单击、双击事件冲突问题（原生js实现）

    由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次单击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示 出现问 ...

  2. [转] Ext Grid （ExtJs）上的单击以及双击事件

    例1: 1.双击 var cb = new Ext.grid.RowSelectionModel({ singleSelect:true //如果值是false,表明可以选择多行:否则只能选择一行 } ...

  3. GridView/DataGrid行单击和双击事件实现代码_.Net教程

    功能: 单击选中行,双击打开详细页面 说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应  ...

  4. 禁用CMFCRibbonApplicationButton的单击和双击事件

    为了禁用CMFCRibbonApplicationButton的单击和双击事件,我重载了CMFCRibbonApplicationButton如下: 1. MyRibbonApplicationBut ...

  5. jquery处理单击和双击事件

    今天做div点击时,需要用到同一div的单击和双击事件,出现问题如下 例子: Html <body> <div id="div_1">单击双击我</d ...

  6. Android 自定义View实现单击和双击事件

    自定义View, 1. 自定义一个Runnable线程TouchEventCountThread ,  用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面 ...

  7. 支持行单击、双击事件的GridView和DataList控件（译）

    支持行单击.双击事件的GridView和DataList控件(译)         让GridView 和 DataList 控件响应鼠标单击.双击事件.并且,使用 ClientScript.Regi ...

  8. [Javasript] 同时实现单击和双击事件

    在同一个元素上同时绑定单击和双击事件: JavaScript <script type="text/javascript"> var timer = 0; var de ...

  9. unity3D 游戏物体同时绑定单击、双击事件

    前言 在unity中我们常用的获取鼠标点击的方法有 在3D场景中,一般用在Update方法中,每一帧调用 void Update(){ )){ Debug.log("鼠标左键点击" ...

随机推荐

  1. Spark Mllib里的卡方检验

    不多说,直接上干货! import org.apache.spark.mllib.stat.Statistics 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mlli ...

  2. Python3基础（6）面向对象编程、异常处理

    ---------------个人学习笔记--------------- ----------------本文作者吴疆-------------- ------点击此处链接至博客园原文------ 1 ...

  3. Java排序算法（三）

    Java排序算法(三) 三.Java排序算法总结 从这三组时间复杂度对比中,可以看出,堆排序和归并排序是不管在什么情况下发挥稳定的,快速排序好的时候表现如天才,坏情况下比较差强人意,甚至在等待排序个数 ...

  4. 【练习笔记】spring 配置Schedule

    spring项目一些简单的定时任务可以通过@Schedule注解来实现,具体配置如下 在applicationContext.xml文件中增加配置 1.引入task约束 xmlns:task=&quo ...

  5. gitk更改主题设置打不开

    ➜ project git:(master) gitk Error in startup script: unknown color name "lime" (processing ...

  6. PIC IDE编译器变量问题

    1.用const关键字是不能把变量定义到ROM区域的,在IDE编译器里要在变量的定义前面加入rom关键字.例如: rom char tmp[257]={0};const rom char tmp[25 ...

  7. uvm_analysis_port——TLM1事务级建模方法（二）

    UVM中的TLM1端口,第一类是用于uvm_driver 和uvm_sequencer连接端口,第二类是用于其他component之间连接的端口,如uvm_monitor和uvm_scoreboard ...

  8. JFinal常量配置学习笔记

    在继承 JFinalConfig 类时,需要 实现 /** * Config constant */ public abstract void configConstant(Constants me) ...

  9. 使用CreateProcess函数运行其他程序

    为了便于控制通过脚本运行的程序,可以使用win32process模块中的CreateProcess()函数创建一个运行相应程序的进程.其函数原型如下.CreateProcess(appName, co ...

  10. 推荐一个VS2015 插件 Favorite Documents

    随着解决方案越来越庞大,查找某个文件变的非常费神,考眼力 有了这个工具我们可以将常用的几个文件或文件夹添加到收藏夹中,随时展开双击即可到达收藏位置 从 视图>其他窗口中打开     安装 在Vi ...