<!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学习之-单击和双击事件的更多相关文章

  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. Java面向对象_继承——基本概念以及管理化妆品实例分析

    一.继承的基本概念: 1.继承是面向对象三大特征之一 2.被继承的类成为父类(超类),继承父类的类成为子类(派生类) 3.继承是指一个对象直接使用另一个对象的属性和方法 4.通过继承可以实现代码重用 ...

  2. (转)CentOS 7系统详细开机启动流程和关机流程

    CentOS 7系统详细开机启动流程和关机流程 原文:http://blog.csdn.net/yuesichiu/article/details/51350654 名称 bootup - 系统启动流 ...

  3. Vim相关问题

    1.vim格式修改 进入配置文件: $ sudo vim /etc/vim/vimrc 在文件末尾添加: #默认查找忽略大小写 set ignorecase #如果有一个大写字母,则切换到大小姐敏感查 ...

  4. logAB = logA + logB; A,B>0

    令 X = logA, Y = logB, Z=logAB .2x = A, 2y = B, 2z = AB, 则有 2z = AB = 2x * 2y = 2x+y ,有z = x+y,即 logA ...

  5. 为什么我们使用Nginx而不是Apache？

    我们大多数的客户在他们的服务器上使用Apache作为Web服务器,尤其是部署在一个基于PHP系统的前端并且使用mod-PHP.鉴于扩张性和性能方面的原因,我们通常会建议他们改用Nginx和FPM. A ...

  6. linux系统redis配置环境变量

    1.测试:在任何位置登录redis redis-cli 指定服务器ip(不指定时,默认本机) redis-cli -h 127.0.0.1 指定端口(不指定时,默认6379) redis-cli -h ...

  7. 多个activity之间的数据共享

    Activity之间的数据共享问题起初一看并没有那么纠结,原因在于两点,一来两个Activity之间可以通过回传的方式进行数据的共享,而哪怕是多个Activity之间,也可以通过静态类进行数据的共享. ...

  8. while循环,break和continue,运算符,格式化输出

    一丶while循环 while条件: 代码块(循环体) #数数 打印1-100 count = 1 while count <= 100: print(count) count += 1 执行顺 ...

  9. 扩展(spread)/收集(rest)运算符

    一.扩展运算符(spread)    场景:使用在数组之前. 作用:将一个数组转为用逗号分隔的参数序列 举例1:数组之前 function foo(x, y, z){ console.log(x, y ...

  10. sql server2016安装程序图

    今天终于有时间安装SQL Server2016正式版,下载那个安装包都用了一个星期 安装包可以从这里下载: http://www.itellyou.cn/ https://msdn.microsoft ...