Vue中的button事件
<!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事件的更多相关文章
- 记一笔vue中的中央事件总线的问题，以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
- vue中使用触摸事件，上滑，下滑，等
第一步,下载一个包 npm install kim-vue-touch -s 在当前项目中下载包 第二部 import vueTouch from 'kim-vue-touch' Vue.use(vu ...
- vue中click阻止事件冒泡，防止触发另一个事件
在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...
- vue中把一个事件绑定到子组件上
官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...
- vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中<select>绑定事件
<div id="app"> <select v-model="selectItem" @change="selectFn($eve ...
- vue中组件绑定事件时是否加.native
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...
- VUE中v-on:click事件中获取当前dom元素
在开发中总是忘记, 特意在此记录 关键字: $event <div class="bed" v-on:click="updateBed(index,$e ...
- vue中bus.$on事件被多次绑定
问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) b ...
随机推荐
- 迅速生成项目-vue-cli-service
推荐指数:
- 02点睛Spring4.1-Java Config
转载:https://www.iteye.com/blog/wiselyman-2210376 2.1 java config spring的java config主要使用@Configuration ...
- RabbitMQ官方教程三 Publish/Subscribe(GOLANG语言实现)
RabbitMQ官方教程三 Publish/Subscribe(GOLANG语言实现) 在上一个教程中,我们创建了一个工作队列. 工作队列背后的假设是,每个任务都恰好交付给一个worker处理. 在这 ...
- WXS----数据类型
- solr关于日期范围查询
问题:从solr上查询创建日期在2019-06-25到2019-06-26之间的数据 createDate:[2019-06-25 TO 2019-06-26]
- Spring之3：ListableBeanFactory
ListableBeanFactory在BeanFactory的位置见<Spring源码阅览——BeanFactory体系结构> ListableBeanFactory:同样扩展BeanF ...
- 《Mysql - Count(*) 的优化》
一:Count(*) 的实现方式? - 要明确的是,在不同的 MySQL 引擎中,count(*) 有不同的实现方式. - MyISAM 引擎把一个表的总行数存在了磁盘上,因此执行 count(*) ...
- Java基础---Java 练习题49
1.分别用do-while和for循环计算1+1/2!+1/3!+…前20项和 /** * 用do-while计算1+1/2!+1/3!+……的前20项的和 * @Hoagn * */ public ...
- oracle安装内核参数设置
安装oracle内核参数说明及设置 kernel.shmmax 说明: Linux进程可以分配的单独共享内存段的最大值(byte) 64位的linux操作系统,设置应该大于SGA_MAX_TARGET ...
- python 之 数据库（多表查询之连接查询、子查询、pymysql模块的使用）
10.10 多表连接查询 10.101 内连接 把两张表有对应关系的记录连接成一张虚拟表 select * from emp,dep: #连接两张表的笛卡尔积 select * from emp,de ...