v-on:click

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Vue实例中的数据,事件和方法</title>

</head>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>

    <div id="root">

        <h1 v-on:click="handleClick">{{content}}</h1>

    </div>

    <script type="text/javascript">

        new Vue({

            el:"#root",

            data:{

                content: "hello world",

            },

            methods:{

                handleClick:function(){

                   this.content = "world"

                }

            }

        })

    </script>

</body>

</html>

点击 world

vue click事件 v-on:click的更多相关文章

  1. 当一个HTML元素需要添加mouseon、mouseout与click事件，或者mouserenter、mouseleave和click事件时，click事件无法触发

    当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...

  2. 关于IOS浏览器：document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  3. fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

    之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...

  4. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

  5. [C# 基础知识系列]专题五：当点击按钮时触发Click事件背后发生的事情 （转载）

    当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑问的—— ...

  6. angularjs 监听 文档click 事件

    项目 上遇到  innHTML  放入 一大段的html 内容 中带有 click 事件 如onclick="callInMethod("http://www.crm.bmcc.c ...

  7. tap 和click 事件区别

    clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...

  8. click事件触发也有失灵的时候？

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  9. checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  10. vue的事件

    vue的事件: vue事件简写: vue中事件是 v-on:click=' show()'    但是我嫌弃它写太长每次都要 v-on: 事件 vue中就有事件简写   @click='show()' ...

随机推荐

  1. Arthas

    Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱 下载&启动 wget https://alibaba.github.io/arthas/arthas-boot.jar 启 ...

  2. kube-proxy的功能

    Kube-proxy的功能 我们知道POD的IP是动态分配的而且经常会变,所以为了可以通过一个不太容易变化的IP访问POD就会使用一个叫做service的东西,通过标签选择器和POD进行关联. Ser ...

  3. 在MySQL中实现Rank高级排名函数【转】

    MySQL中没有Rank排名函数,当我们需要查询排名时,只能使用MySQL数据库中的基本查询语句来查询普通排名.尽管如此,可不要小瞧基础而简单的查询语句,我们可以利用其来达到Rank函数一样的高级排名 ...

  4. 华为模拟器eNSP安装（最新）网络工程师必备！

    电脑杂七杂八的东西太多了,于是今天把电脑重装系统了,正好重新安装一下华为模拟器eNSP,这个教程应该是最新的,因为eNSP版本更新以及华为官网页面的变化,有的小伙伴安装eNSP都下载不到安装包,接下来 ...

  5. ionic3 生命周期

    ionic3 总共有8个钩子函数,分别是:onPageLoaded,onPageWillEnter,onPageDidEnter,onPageWillLeave,onPageDidLeave,onPa ...

  6. ORM（四）字段参数

    null:如果null=True,则该字段在数据库中的值可以为NULL,默认null=False. blank:如果blank=True,前端form表单可以空,注意,这与NULL不同.NULL纯粹与 ...

  7. 今年开搞了,搭建一下vue开发环境

    首先-->搞了几天的SpringBoot玩的差不多了,领导直接说, 别项目组需要做前后端分离,说前端缺少人手,没有办法咯,只能硬着头皮去了, 说先学一下'vue',给我个文档让我学学,说是前半年 ...

  8. Windows To Go入坑记录

    什么是Windows To Go? https://en.wikipedia.org/wiki/Windows_To_Go 微软为了解决企业用户的需求而推出,可以在u盘或者移动硬盘启动window系统 ...

  9. .NET微服务调查结果

    .NET Core就是专门针对模块化的微服务架构而设计, 在2018年国庆时间展开.NET微服务的使用情况,本次调查我们总计收到了来自378个开发者的调查.从落地现状.架构体系.未来趋势等方面对微服务 ...

  10. Android 开发者必知必会的权限管理知识

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/OQRHEufCUXBA3d3DMZXMKQ 导语 本 ...