<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" href="styles/demo.css" />

	</head>

	<body>

		<div id="app">

			<fieldset>

				<legend>

					Create New Person

				</legend>

				<div class="form-group">

					<label>Name:</label>

					<input type="text" v-model="newPerson.name"/>

				</div>

				<div class="form-group">

					<label>Age:</label>

					<input type="text" v-model="newPerson.age"/>

				</div>

				<div class="form-group">

					<label>Sex:</label>

					<select v-model="newPerson.sex">

					<option value="Male">Male</option>

					<option value="Female">Female</option>

				</select>

				</div>

				<div class="form-group">

					<label></label>

					<button @click="createPerson">Create</button>

				</div>

		</fieldset>

		<table>

			<thead>

				<tr>

					<th>Name</th>

					<th>Age</th>

					<th>Sex</th>

					<th>Delete</th>

				</tr>

			</thead>

			<tbody>

				<tr v-for="(person, index) in people">

					<td>{{ person.name }}</td>

					<td>{{ person.age }}</td>

					<td>{{ person.sex }}</td>

					<td :class="'text-center'"><button @click="deletePerson(index)">Delete</button></td>

				</tr>

			</tbody>

		</table>

		</div>

	</body>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

	<script>

		var vm = new Vue({

			el: '#app',

			data: {

				newPerson: {

					name: '',

					age: 0,

					sex: 'Male'

				},

				people: [{

					name: 'Jack',

					age: 30,

					sex: 'Male'

				}, {

					name: 'Bill',

					age: 26,

					sex: 'Male'

				}, {

					name: 'Tracy',

					age: 22,

					sex: 'Female'

				}, {

					name: 'Chris',

					age: 36,

					sex: 'Male'

				}]

			},

			methods:{

				createPerson: function(){

					this.people.push(this.newPerson);

					// 添加完newPerson对象后，重置newPerson对象

					this.newPerson = {name: '', age: 0, sex: 'Male'}

				},

				deletePerson: function(index){

					// 删一个数组元素

					this.people.splice(index,1);

				}

			}

		})

	</script>

</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. mysql遇见Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre的问题

    问题出现的原因: MySQL 5.7.5及以上功能依赖检测功能.如果启用了ONLY_FULL_GROUP_BY SQL模式(默认情况下),MySQL将拒绝选择列表,HAVING条件或ORDER BY列 ...

  2. 【转】行内元素和inline-block产生的水平空隙bug

    重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码: <div class=“”><span clas ...

  3. Linux awk+uniq+sort 统计文件中某字符串出现次数并排序

    https://blog.csdn.net/qq_28766327/article/details/78069989 在服务器开发中,我们经常会写入大量的日志文件.有时候我们需要对这些日志文件进行统计 ...

  4. python gdal安装与简单使用

    原文链接:python gdal安装与简单使用 gdal安装方式一:在网址 https://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal 下载对应python版本的 ...

  5. ubuntu mysql5.7设置Open Files Limit

    目的:解决Too many open files异常 方式:设置Open Files Limit 环境:(MySQL)Server version: 5.7.27-0ubuntu0.16.04.1 ( ...

  6. C++语法笔记（上）

    客观事物中任何一个事物都可以看成一个对象,对象是由一组属性和一组行为构成的. c++中,每个对象都是由数据与函数这两部分构成,数据就是对象的属性,函数就是对象的行为. c++中对象的类型称为类,类是一 ...

  7. 以php中的自增自自减运算符操作(整型,浮点型,字符串型,布尔型,空类型)数据

    // 环境 // // php版本 // PHP 7.0.33-0+deb9u1 (cli) (built: Dec 7 2018 11:36:49) ( NTS ) // Copyright (c) ...

  8. ansible使用普通用户免密登陆+sudo提权

    前提:从ansible控制端使用test用户可以免密登陆所有被控制端,并且被控端test用户支持sudo提权 # ansible主机清单 cat /etc/ansible/hosts [online- ...

  9. HTML5从入门到精通（千锋教育）免费电子版+PDF下载

    本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...

  10. C++11（及现代C++风格）和快速迭代式开发

    过去的一年我在微软亚洲研究院做输入法,我们的产品叫“英库拼音输入法” (下载Beta版),如果你用过“英库词典”(现已更名为必应词典),应该知道“英库”这个名字(实际上我们的核心开发团队也有很大一部分 ...