Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法

第Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法視圖：

代碼如下：

!DOCTYPEhtml

html

head

metacharset="utf-8"

title/title

//導入vue.js

scripttype="text/javascript"src="./vue.js"/script

//非常簡單了設置了一下css樣式

styletype="text/css"

#app{

height:100%;

margin-left:200px;

width:50%;

text-align:center;

background-color:lightpink

.tab{

width:600px;

margin-top:30px;

background-color:lightpink;

input{

height:25px;

margin-top:10px;

border-radius:5px;

/style

/head

body

divid="app"

div

姓名:inputtype="text"name="uname"v-model="userName"br

年齡:inputtype="text"name="uage"id="uage"v-model="userAge"br

性別:selectname="gender"v-model="selected"

optionv-for="optioninoptions"v-bind:value="option.gender"

{{option.gender}}

/option

/select

{{selected}}

buttontype="button"v-on:click="insertInfo"創(chuàng)建/button

/div

table

th姓名/th

th年齡/th

th性別/th

th刪除/th

/tr

trv-for="(person,index)ininfoArr"

td{{person.uname}}/td

td{{person.uage}}/td

td{{person.gender}}/td

tdbuttonv-on:click="deleteInfo(index)"刪除/button/td

/tr

/table

/div

/body

/html

scripttype="text/javascript"

newVue({

el:"#app",

data:{

msg:"hello",

selected:'女',

userName:'',

userAge:'',

options:[

{gender:"男"},

{gender:"女"}

infoArr:[]

methods:{

//添加數(shù)據(jù)的方法

insertInfo(){

varobj={};

obj.uname=this.userName;

obj.uage=this.userAge;

obj.gender=this.selected;

Arr.push(obj);

console.log(obj);

//刪除的方法

deleteInfo(index){

Arr.spli