html form 删除 一行,Vue表单创建一行数据及删除数据的实现与理解

目标两个例子:

1.表单数据一行的创建+删除(彻底删除/隐藏双实现)

2.计算商品总价格

如何使用Vue：

基本结构:

1、引入Vue的核心JS文件

2、准备Dom结构

3、实例化组件

通过el属性，挂载元素，绑定id为app的html元素

通过data属性，定义数据，可以在html代码段中显示的数据

4、获取数据

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

第一题代码+注释

Title

form{

width: 500px;

height: 210px;

border: 1px solid;

border-color: red;

}

table{

margin-top: 20px;

width: 500px;

border: 1px solid;

border-color: red;

}

tr{

text-align: center;

}

姓名:

年龄:

性别:

男

女

手机:

创建新用户

姓名	性别	年龄	手机	删除
{{person.name}}	{{person.sex}}	{{person.age}}	{{person.tel}}	删除

var app = new Vue({

el:"#app", // el：element的简写。挂载元素，绑定id为app的html元素

data:{

newPerson:{

name:"",

sex:"",

age:"",

tel:""

},

people:[{

name:"张三",

sex:"男",

age:"25",

tel:"145xxxxxx"

},{

name:"李四",

sex:"女",

age:"15",

tel:"139xxxxxx"

},{

name:"王五",

sex:"女",

age:"9",

tel:"115xxxxxx"

}]

},

methods:{

//隐藏功能

/*delete1:function(e){

e.currentTarget.parentElement.parentElement.style.display="none";

},*/

createPerson: function(){

console.log(this);

this.people.push(this.newPerson); //push拼接方法

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

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

},

delPerson: function(index){

// 删一个数组元素

this.people.splice(index,1); //splice分割方法,1代表分割几个

}

}

});

第二题代码+注释

Title

table{

border: 1px;

border-color: #d58512;

}

tr{

border-color: #d58512;

text-align: center;

}

#tr_1{

background: #dedede ;

}

#tr_2{

background: #666666 ;

}

#tr_3{

background:rosybrown ;

}

编号	名称	单价	数量	操作
{{product.id}}	{{product.name}}	{{product.price}}	- {{product.num}} +	删除
总金额:{{sum()}}

var app = new Vue({

el:"#app",

data:{

goods:[{

id:1,

name:"锤子",

price:10,

num:0

},{

id:2,

name:"毛线",

price:20,

num:0

},{

id:3,

name:"铲铲",

price:15,

num:0

}]

},

methods:{

//+法

subtract:function(index){

if(this.goods[index].num == 0){

this.goods[index].num = 0;

}else{

this.goods[index].num--;

}

},

//-法

add:function(index){

this.goods[index].num++;

},

//删除

del:function(index){

//e.currentTarget.parentElement.parentElement.style.display="none"; //隐藏功能

this.goods.splice(index,1); //splice分割方法,1代表分割几个

},

sum: function () {//遍历数组,计算总金额

var s = 0;

//单独按键方法里this代表当前行整个数据,外面代表整个vue对象,可以获调用所有属性

for (var i = 0; i < this.goods.length; i++) {

s += this.goods[i].price * this.goods[i].num;

}

return s;

}

}

});

标签：function,index,Vue,name,border,表单,num,goods,数据

来源： https://blog.csdn.net/a924382407/article/details/89525351