<!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. asp.net 中@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction

    1.带有Render的方法返回值是void,在方法内部进行输出:不带的返回值类型为MvcHtmlString,所以只能这样使用: @Html.Partial 对应 @{Html.RenderParti ...

  2. struts2 第二天

    3.自动装配  零散属性:Action类中两个成员变量的名称和页面上表单元素name属性值保持一致.      规则:约定优于配置.  领域模型:两种配置    public class FirstA ...

  3. 常见SQL优化方法

    SQL优化的一些方法 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否 ...

  4. windows系统下同时启动三台Tomcat服务的配置&并设置开机启动服务

    1.tomcat 7.0.82下载地址:链接:https://pan.baidu.com/s/1i51pAgl 密码:mxol 2.解压apache-tomcat-7.0.82-windows-x64 ...

  5. css3动画-加载中...

    写几个简单的加载中动画吧. 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小.css3里面有一个用于尺度变换的方法:scale(x,y):定义 2D 缩放转换,改变元素的宽度和高度. 第四 ...

  6. new Date(str)返回的时间结果在移动端比PC端快了8小时

    最近开发过程中,后端传过来一个“2018-03-15T17:53:19.6307928”字符串,需要将字符串转换成“2018-03-15  17:53”的格式展示出来.首先我使用了var time=n ...

  7. JavaScript获取样式值的几种方法学习总结

    本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. st ...

  8. [转]Git之忽略文件(ignore file)

    原文链接:http://blog.csdn.net/benkaoya/article/details/7932370 .gitignore 配置文件用于配置不需要加入版本管理的文件,配置好该文件可以为 ...

  9. [Java]在xp系统下java调用wmic命令获取窗口返回信息无反应（阻塞）的解决方案

    背景:本人写了一段java代码,调用cmd命令“wmic ...”来获取系统cpu.mem.handle等资源信息.在win7操作系统下运行没有问题,在xp系统下却发现读取窗口反馈信息时无反应(阻塞) ...

  10. jQuery_2_常规选择器-进阶选择器

    进阶选择器: 1. 群组选择器     $("span,em,#box")   获取多个选择器的DOM对象 <div id="d1">div< ...