<!DOCTYPE html>

<html lang="zh">

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <link href="../css/style.css" rel="stylesheet"> </head>

<body>

<div id="myApp">

    <p>您最喜欢的游戏是：{{mygame}}</p>

    <button v-on:click="btnClick('我的世界')">我的世界</button>

    <button v-on:click="btnClick('勇者斗恶龙')">勇者斗恶龙</button>

    <button v-on:click="btnClick('塞尔达传说')">塞尔达传说</button>

    <button @click="btnClick('魔界战记5')">魔界战记5</button>

</div>

<script>

    var myApp = new Vue({

        el: '#myApp',

        data: {

            mygame: '超级马里奥'

        },

        methods: {

            btnClick: function(pname){

                this.mygame = pname;

            },

        },

    });

</script>

</body>

</html>

按钮事件v-on的更多相关文章

  1. Java Hello World例子和添加按钮事件与功能

    新建android工程,然后默认“下一步”即可完成创建: 2.添加Button 3.在src的MainActivity.java添加以下红色代码 import android.support.v7.a ...

  2. Android开发系列之按钮事件的4种写法

    经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity ...

  3. Android按钮事件的4种写法

    经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity ...

  4. android安卓开发基础小笔记,添加按钮事件,打开新窗体,窗体传值,回传

    给一个按钮添加onclick事件 //获取按钮对象 Button Aiyo = (Button)findViewById(R.id.button1); Aiyo.setOnClickListener( ...

  5. ngui中 代码调用按钮事件(后来改成了按钮绑定键盘..)

    ngui中 代码调用按钮事件 好烦人啊这个问题, 我弄完发上来 这个问题解决了一半 发现可以用 按钮绑定来解决这个问题,并且更安全方便快速 直接在按钮上添加一个 key binding 指定按键 搞定 ...

  6. MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱

    网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...

  7. JS调用水晶报表打印翻页按钮事件

    默认的水晶报表打印按钮.翻页按钮太小,并且样式不好调整,考虑自己做一个按钮,然后调用水晶报表的按钮事件. 在实际操作中发现可以在.net按钮的服务器端事件中调用翻页方法: CrystalReportV ...

  8. ASP.NET多个Button的页面，回车执行按钮事件（转）

    主要有两种实现方法分别是:JavaScript的方法与Panel的方法 一.JavaScript的方法 ①单输入框(文本框)单按钮的实现方法 以下功能实现:在输入框中输入内容之后,按回车键就执行按钮事 ...

  9. asp.net中父子页面通过gridview中的按钮事件进行回传值的问题

    这两天写BS程序,遇到父子页面传值的问题,以前没写过web系统,用了几天时间才将问题解决,总结下记录下来: 问题描述: 父页面A中有一个gridview,每行6个列,有5列中均有一个按钮,单击按钮,会 ...

  10. asp.net中用回车代替按钮事件

    第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了.当然,还有按钮事件. <html> <head> <title>测试绑定enter</title ...

随机推荐

  1. ThreadPoolTaskExecutor的配置使用

    版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ft305977550/article/de ...

  2. ELK日志分析系统（原创）

    一.简介 ELK由Elasticsearch.Logstash和Kibana三部分组件组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引 ...

  3. scala入门基础学习

    1.Scala基础语法 区分大小写 类名 - 对于所有的类名的第一个字母要大写.如果需要使用几个单词来构成一个类的名称,每个单词的第一个字母要大写. 方法名称 - 所有的方法名称的第一个字母用小写. ...

  4. 【学术篇】SDOI2009 学校食堂

    传送门~ 题目大意 先分析\((x\ or\ y)-(x\ and\ y)\), 就是\(x\)和\(y\)中存在的1减去\(x\)和\(y\)中相同的1 *那不就是\(x\ xor\ y\)么←_← ...

  5. CSIC_716_20191101【编程语言、变量、垃圾回收机制】

    编程语言分类:机器语言.汇编语言.高级语言. 机器语言:机器能直接识别的程序语言或指令代码(二进制指令),勿需经过翻译,每一操作码在计算机内部都有相应的电路来完成它 汇编语言:比机器语言略高级,用英文 ...

  6. jquery高级编程学习

    jquery高级编程 第1章.jQuery入门 类型检查 对象 类型检查表达式 String typeof object === "string" Number typeof ob ...

  7. HashMap 什么时候进行扩容呢

    HashMap扩容: 当HashMap中的元素越来越多的时候,碰撞的几率也就越来越高(因为数组的长度是固定的),所以为了提高查询的效率,就要对HashMap的数组进行扩容,数组扩容这个操作也会出现在A ...

  8. JavaScript 对象与函数

    对象参考手册 Array Boolean Date Math Number String RegExp Global 前言 在js中什么都是对象(包括函数). 函数是用来实现具体功能的代码,用一种方式 ...

  9. python模块typing的作用

    一.介绍 Python是一门弱类型的语言,很多时候我们可能不清楚函数参数类型或者返回值类型,很有可能导致一些类型没有指定方法,在写完代码一段时间后回过头看代码,很可能忘记了自己写的函数需要传什么参数, ...

  10. java中字符数组与字符串之间互相转换的方法

    public static void main(String[] args) { //1.字符数组 转换成 字符串 //(1)直接在构造String时转换 char[] array = new cha ...