<!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. pytorch clamp 与clamp_区别

    pytorch clamp 与clamp_ ,有下划线的表示修改并付给自身,无下划线的表示需要返回处理后的值,比如: h = k.clamp(min=0) #将结果存入h,k保留原值 k.clamp_ ...

  2. iOS开发系列-UIImageView的contentMode

    typedef NS_ENUM(NSInteger, UIViewContentMode) { UIViewContentModeScaleToFill, UIViewContentModeScale ...

  3. mysql连接数问题备份

    一. max_connections 这是是查询数据库当前设置的最大连接数 mysql> show variables like '%max_connections%';+----------- ...

  4. nodejs . module.exports

    //utils.js let a = 100; console.log(module.exports); //能打印出结果为:{} console.log(exports); //能打印出结果为:{} ...

  5. CF773E Blog Post Rating

    题意:有一篇博客.一共有n个人,心中有他们期望该博客得到的赞数a[i].当某个时刻该博客的获赞数<a[i],则该人会使得赞数+1,当赞数>a[i],该人会使得赞数-1,当赞数=a[i],不 ...

  6. Mysql ---Sqlserver数据迁移到Mysql（Mysql建表迁移数据）

    1 试用了MysqlWorkBench的数据迁移功能 以为能实现:建立跟Sqlserver一样的表结构和视图的功能,sqlserver的数据迁移到mysql 实际上发现:即使勾选了表和视图,实际上却只 ...

  7. duilib教程之duilib入门简明教程14.部分bug 2

    上一个教程中提到了ActiveX的Bug,即如果主窗口直接用变量生成,则关闭窗口时会产生崩溃      如果用new的方式生成,则不会崩溃,所以给出一个临时的快速解决方案,即主窗口都用new生成,_t ...

  8. CUDA 关于 BLOCK数目与Thread数目设置

    GPU的计算核心是以一定数量的Streaming Processor(SP)组成的处理器阵列,NV称之为Texture Processing Clusters(TPC),每个TPC中又包含一定数量的S ...

  9. Wed Nov 01 13:03:16 CST 2017 WARN: Establishing SSL connection without server's identity verification is not recommended.

    报错:Wed Nov 01 13:03:16 CST 2017 WARN: Establishing SSL connection without server's identity verifica ...

  10. System.String.cs

    ylbtech-System.String.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c5619 ...