1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 		<link rel="stylesheet" href="styles/demo.css" />
  8. 	</head>
  9.  
  10. 	<body>
  11. 		<div id="app">
  12.  
  13. 			<fieldset>
  14. 				<legend>
  15. 					Create New Person
  16. 				</legend>
  17. 				<div class="form-group">
  18. 					<label>Name:</label>
  19. 					<input type="text" v-model="newPerson.name"/>
  20. 				</div>
  21. 				<div class="form-group">
  22. 					<label>Age:</label>
  23. 					<input type="text" v-model="newPerson.age"/>
  24. 				</div>
  25. 				<div class="form-group">
  26. 					<label>Sex:</label>
  27. 					<select v-model="newPerson.sex">
  28. 					<option value="Male">Male</option>
  29. 					<option value="Female">Female</option>
  30. 				</select>
  31. 				</div>
  32. 				<div class="form-group">
  33. 					<label></label>
  34. 					<button @click="createPerson">Create</button>
  35. 				</div>
  36. 		</fieldset>
  37. 		<table>
  38. 			<thead>
  39. 				<tr>
  40. 					<th>Name</th>
  41. 					<th>Age</th>
  42. 					<th>Sex</th>
  43. 					<th>Delete</th>
  44. 				</tr>
  45. 			</thead>
  46. 			<tbody>
  47. 				<tr v-for="(person, index) in people">
  48. 					<td>{{ person.name }}</td>
  49. 					<td>{{ person.age }}</td>
  50. 					<td>{{ person.sex }}</td>
  51. 					<td :class="'text-center'"><button @click="deletePerson(index)">Delete</button></td>
  52. 				</tr>
  53. 			</tbody>
  54. 		</table>
  55. 		</div>
  56. 	</body>
  57. 	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  58. 	<script>
  59. 		var vm = new Vue({
  60. 			el: '#app',
  61. 			data: {
  62. 				newPerson: {
  63. 					name: '',
  64. 					age: 0,
  65. 					sex: 'Male'
  66. 				},
  67. 				people: [{
  68. 					name: 'Jack',
  69. 					age: 30,
  70. 					sex: 'Male'
  71. 				}, {
  72. 					name: 'Bill',
  73. 					age: 26,
  74. 					sex: 'Male'
  75. 				}, {
  76. 					name: 'Tracy',
  77. 					age: 22,
  78. 					sex: 'Female'
  79. 				}, {
  80. 					name: 'Chris',
  81. 					age: 36,
  82. 					sex: 'Male'
  83. 				}]
  84. 			},
  85. 			methods:{
  86. 				createPerson: function(){
  87. 					this.people.push(this.newPerson);
  88. 					// 添加完newPerson对象后，重置newPerson对象
  89. 					this.newPerson = {name: '', age: 0, sex: 'Male'}
  90. 				},
  91. 				deletePerson: function(index){
  92. 					// 删一个数组元素
  93. 					this.people.splice(index,1);
  94. 				}
  95. 			}
  96. 		})
  97. 	</script>
  98.  
  99. </html>

　　

Vue中的button事件的更多相关文章

  1. 记一笔vue中的中央事件总线的问题，以及解决方案

    代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...

  2. vue中使用触摸事件，上滑，下滑，等

    第一步,下载一个包 npm install kim-vue-touch -s 在当前项目中下载包 第二部 import vueTouch from 'kim-vue-touch' Vue.use(vu ...

  3. vue中click阻止事件冒泡，防止触发另一个事件

    在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...

  4. vue中把一个事件绑定到子组件上

    官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...

  5. vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue中<select>绑定事件

    <div id="app"> <select v-model="selectItem" @change="selectFn($eve ...

  7. vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...

  8. VUE中v-on:click事件中获取当前dom元素

    在开发中总是忘记, 特意在此记录 关键字:   $event     <div class="bed" v-on:click="updateBed(index,$e ...

  9. vue中bus.$on事件被多次绑定

    问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) b ...

随机推荐

  1. axios发了两次请求

    一.问题描述 用axios发post请求,却出现了options请求和post请求,options请求哪里来的? 二.问题分析 1.先温习一下跨域的知识 2.axios默认类型是Content-Typ ...

  2. Java基础教程：多线程杂谈——双重检查锁与Volatile

    Java基础教程:多线程杂谈——双重检查锁与Volatile 双重检查锁 有时候可能需要推迟一些高开销的对象初始化操作,并且只有在使用这些对象时才进行初始化.此时程序员可能会采用延迟初始化.但要正确实 ...

  3. Nginx负载均衡－如何自定义URL中的hash key

    "例如请求的url为http://www.a.com/{path_var1}/{path_var2}path_var1和path_var2是两个path variable如果现在只想根据pa ...

  4. OneNote中更改英文输入默认不是微软雅黑的问题

    win10下的终极版解决方案: 1.进入C:\Windows\Fonts找到Calibri字体,点进去后先右键Calibri常规-属性-安全-高级,将所有者从“TrustedInstaller”更改为 ...

  5. 一文带你全面了解RxJava

    工作需要,刚好在学习 RxJava网络请求框架,网上搜了一些 关于RxJava 的教程,但都并不是很好理解,所幸最后找到了几篇有助于初学者了解 RxJava 的文章,于是结合自己的理解,重新整理成一篇 ...

  6. 关于Hive中的join和left join的理解

    一.join与left join的全称 JOIN是INNER JOIN的简写,LEFT JOIN是LEFT OUTER JOIN的简写. 二.join与left join的应用场景 JOIN一般用于A ...

  7. [Oracle] - 使用32位 PLSQL（PL/SQL Developer）登陆64位Oracle失败之解决

    配置环境 Oracle服务端oracle_winx64_12c_database.iso Oracle客户端instantclient-basiclite-nt-12.1.0.1.0.zip 集成开发 ...

  8. MongoDB的Shell操作

    前言 本文从介绍了MongoShell 的配置.脚本.数据类型和其他指令. MongoShell - 简介 MongoShell是一个互动的JavaScript接口的MongoDB,可以使用Mongo ...

  9. AVR单片机教程——序言

    我一直觉得现在的网络环境对电子技术的学习有一点问题,但始终无法确切地指出,更何况网络上相关资源已经那么丰富. 但我觉得是问题的,无论它到底是不是问题,对我来说总归是一个问题.我学习也不算深入,很多东西 ...

  10. 【Linux】一步一步学Linux——虚拟机安装和卸载(05)

    目录 00. 目录 01. Workstation Pro 15.0安装简介 02. Windows 主机上安装 Workstation Pro 15.0 03. Linux 主机上安装 Workst ...