<!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. palindrome 回文 /// Manacher算法

    判断最长不连续回文 #include <bits/stdc++.h> using namespace std; int main() { ]; while(gets(ch)) { ],an ...

  2. JDBC_事务说明

    JDBC控制事务:1.事务:一个包含多个步骤的业务操作,如果这个业务操作被事务管理则多个步骤同时成功或同时失败2.操作: 1.开启事务 2.提交事务 3.回滚事务3.使用Connection对象来管理 ...

  3. PostGIS 通过SQL语句实现空间分析【入门级】

    PostGIS是对象关系型数据库系统PostgreSQL的一个扩展,PostGIS提供如下空间信息服务功能:空间对象.空间索引.空间操作函数和空间操作符.同时,PostGIS遵循OpenGIS的规范. ...

  4. python2x 安装 psutil

    安装psutil模块: wget https://pypi.python.org/packages/source/p/psutil/psutil-2.0.0.tar.gz --no-check-cer ...

  5. Laravel Illuminate\Http\Exceptions\PostTooLargeException

    出错原因是: 请求的post的数据比 php.ini设定的 post_max_size大的原因 解决方法: 增加php.ini中 post_max_size和upload_max_filesize的设 ...

  6. 校园商铺-4店铺注册功能模块-1Dao层之更新店铺

    dao层增加更新店铺的方法 package com.csj2018.o2o.dao; import com.csj2018.o2o.entity.Shop; public interface Shop ...

  7. thinkphp Trace方法

    页面Trace只能用于有页面输出的情况,但是trace方法可以用在任何情况,而且trace方法可以用于AJAX等操作. Trace方法的格式: trace('变量','标签','级别','是否记录日志 ...

  8. 概率dp——hdu4089推公式+循环迭代

    迭代是化简公式的常用技巧 dp[i][j]表示队伍中有i人,tomato排在第j位出现情况2的概率,那么先推出公式再进行简化 dp[i][1]=p21*dp[i][i] + p41 j<=k : ...

  9. 计算几何——圆卡精度cf1059D

    double 在1e17以后就不能顾及小数,所以用一下加精度的技巧 sqrt(r*r-d*d)=sqrt(r+d)*sqrt(r-d) 遇到误差在几位以内的注意要修改二分的精度,用最大的数据去乘以精度 ...

  10. [SNOI 2017] 炸弹

    题目描述: 给定炸弹和爆炸范围,求对于每个炸弹连锁爆炸的炸弹总和对\(1e9+7\)取膜 思路: 为啥都是线段树+TS+tarjan呢? 实在是搞不懂~~ 线性\(O(n)\)递推即可. #inclu ...