按钮事件v-on
<!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的更多相关文章
- Java Hello World例子和添加按钮事件与功能
新建android工程,然后默认“下一步”即可完成创建: 2.添加Button 3.在src的MainActivity.java添加以下红色代码 import android.support.v7.a ...
- Android开发系列之按钮事件的4种写法
经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity ...
- Android按钮事件的4种写法
经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity ...
- android安卓开发基础小笔记,添加按钮事件,打开新窗体,窗体传值,回传
给一个按钮添加onclick事件 //获取按钮对象 Button Aiyo = (Button)findViewById(R.id.button1); Aiyo.setOnClickListener( ...
- ngui中 代码调用按钮事件(后来改成了按钮绑定键盘..)
ngui中 代码调用按钮事件 好烦人啊这个问题, 我弄完发上来 这个问题解决了一半 发现可以用 按钮绑定来解决这个问题,并且更安全方便快速 直接在按钮上添加一个 key binding 指定按键 搞定 ...
- MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱
网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...
- JS调用水晶报表打印翻页按钮事件
默认的水晶报表打印按钮.翻页按钮太小,并且样式不好调整,考虑自己做一个按钮,然后调用水晶报表的按钮事件. 在实际操作中发现可以在.net按钮的服务器端事件中调用翻页方法: CrystalReportV ...
- ASP.NET多个Button的页面，回车执行按钮事件（转）
主要有两种实现方法分别是:JavaScript的方法与Panel的方法 一.JavaScript的方法 ①单输入框(文本框)单按钮的实现方法 以下功能实现:在输入框中输入内容之后,按回车键就执行按钮事 ...
- asp.net中父子页面通过gridview中的按钮事件进行回传值的问题
这两天写BS程序,遇到父子页面传值的问题,以前没写过web系统,用了几天时间才将问题解决,总结下记录下来: 问题描述: 父页面A中有一个gridview,每行6个列,有5列中均有一个按钮,单击按钮,会 ...
- asp.net中用回车代替按钮事件
第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了.当然,还有按钮事件. <html> <head> <title>测试绑定enter</title ...
随机推荐
- [eJOI2018]元素周期表
题目 \((r_1,c_1),(r_2,c_1),(r_1,c_2)\)三个格子存在就说明\((r_2,c_2)\)存在,如果我们将\(r_1,c_2,c_1,r_2\)都看成一些点的话,那么这个关系 ...
- ATC/TC/CF
10.25 去打 CF,然后被 CF 打了. CF EDU 75 A. Broken Keyboard 精神恍惚,WA 了一发. B. Binary Palindromes 比赛中的憨憨做法,考虑一个 ...
- centos yum install 找不到软件包
yum install epel-release 然后再试试yum install 其他安装包
- Java oop第05章_多态、接口
一. 为什么需要接口? Java中当一个类继承父类时,最多也只能继承一个父类,扩展性会受到一定的限制,为了弥补这一缺陷,Java又提供了一种新的引用数据类型分类,叫接口. 一个类只能继承一个父类,但可 ...
- mysql sql的分类、运算符、常用的数据类型
SQL (结构化查询语言)的分类 DML(数据操作语言),关键字 insert,update,delete, DCL(数据控制语言),控制权限,grand,revoke 授权,回收 DDL(数据定义语 ...
- 2018-8-10-win10-uwp-如何让一个集合按照需要的顺序进行排序
title author date CreateTime categories win10 uwp 如何让一个集合按照需要的顺序进行排序 lindexi 2018-08-10 19:16:50 +08 ...
- (转)Google Protocol Buffer 的使用和原理
转自:https://www.ibm.com/developerworks/cn/linux/l-cn-gpb/index.html 简介 什么是 Google Protocol Buffer? ...
- 关于pip安装较慢的问题解决
在 ~/.pip/ 下创建文件 pip.conf(如果还没有的话),并填入以下内容: [global] timeout = 6000 index-url = http://pypi.douban.co ...
- innodb 表
1.innodb的存储引擎表类型 如果在创建表时没有显示的定义主键,则innodb存储引擎会按如下方式选择或创建主键 a.首先表中是否有非空的唯一约束(Unique not null)如果有,则该列即 ...
- Flask扩展 -- flask-mail
电子邮件是最常用的通信方式之一.虽然Python标准库中的smtplib包可用在Flask程序中发送电子邮件,但包装了smtplib的Flask-Mail扩展能更好的和Flask集成. 1.安装Fla ...