<!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. DB2使用MERGE INTO语句实现西虹市首富的新增及更新操作

    首先我们新建一张名为XIHONGSHISHOUFU的表,这张表是评委会初步评选出的西虹市首富的候选人员,下面的SQL语句包含建表和插入数据的部分: CREATE TABLE XIHONGSHISHOU ...

  2. DALFactory出现"未能加载文件或程序集“DAL”或它的某一个依赖项。系统找不到指定的文件”的解决方案 .

    自己在使用抽象工厂+配置文件+反射实现重构机房的过程中,遇到了这种情况, 当初自己认真的检查了反射中的代码,都是没有问题,请教了师姐,检查了抽象工厂与反射的使用都没有问题 // 查找我们将要使用的数据 ...

  3. web端自动化——Remote应用

    Selenium Grid允许同时并行地.在不同的环境上运行多个测试任务.这里主要演示一下怎么使用Selenium Grid. 准备: 1. 需要两台机子 2.两台机子分别安装好JDK环境 3.两台机 ...

  4. 常见问题:计算机网络/完整HTTP访问

    域名解析 以浏览器进行HTTP访问为例,首先搜索自身DNS缓存(一般缓存1000条左右,仅缓存1分钟),若有且未过期,结束. 若未找到,则搜索操作系统的DNS缓存. 若未找到,尝试读取hosts文件. ...

  5. Select 查询语句

    1.1  查询语句 1.1.1     select select 用于从数据看查询数据.语法 select field1,filed2,.. . from tablename [where cond ...

  6. [SourceTree] - 使用内置 Git 克隆项目出现 templates not found 问题之解决

    背景 使用 SourceTree 克隆 Asp.Net Core 项目失败. 错误 warning: templates not found C:\Program Files\Git\share\gi ...

  7. Matlab R2017b 打开后一直显示“正在初始化”，导致无法运行命令

    1. 前言 Matlab R2017b打开后一直显示"正在初始化",导致无法运行命令. 2. 解决方案 1. 找到并记录授权文件license_standalone.lic的路径. ...

  8. Python入门学习——PyQt5程序基本结构

    在学习python GUI部分时,一开始看书有点懵,看不懂框架,以下是个人学习所得(参考了别人的视频讲解),错误之处,望大家指教 #0.导入需要的包和模块from PyQt5.Qt import * ...

  9. Eclipse设置每行的最大字符数

    Eclipse默认宽度是 120 个字符.如下图所示(提示:格式化快捷键Ctrl + Shift + F): 设置步骤如下: 菜单栏倒数第二项,选择Window 下拉栏最后一项,选择Preferenc ...

  10. docker 实践十：docker 网络管理

    本篇是关于 docker 网络管理的内容,同时也包含了 docker 网络的高级应用. 注:环境为 CentOS7,docker 19.03. docker 网络基础 docker 网络模型 在 do ...