注册 登录 充值会员 退出
毕业设计 PHP源码
充值

vue动态添加删除表格数据代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-01-09
vue动态添加删除表格数据代码
一款bootstrap风格样式的很实用的vue动态添加删除表格数据代码,输入用户名和年龄自由添加用户信息表格,可以删除用户信息,支持批量全部删除表格数据。


js代码

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<script>
	  window.onload = function(){
		  new Vue({
			  el:'#box',
			  data:{
				 myData:[],
				 username:"",
				 age:"",
				 nowIndex:-100
			  },
			  methods:{
				 add:function(){
					  this.myData.push({
						  username:this.username,
						  age:this.age
					  })
					 this.username="",
					 this.age=""
				 },
				  del:function(n){
					  if(n ==-2){
						  this.myData="";
					  }{
						  this.myData.splice(n,1);
					  }
				  }
			  }
		  })
	  }
</script>