Heim > Artikel > Web-Frontend > Teilen von Methoden zum dynamischen Erstellen und Löschen von Daten in Vue
Teilen von Methoden zum dynamischen Erstellen und Löschen von Daten in Vue
- 小云云Original
- 2018-05-15 13:57:371655Durchsuche
Dieser Artikel stellt Ihnen hauptsächlich eine Methode zum dynamischen Erstellen und Löschen von Daten in Vue vor. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.
Ansicht:
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
//导入vue.js
<script type="text/javascript" src="./vue.js"></script>
//非常简单了设置了一下css样式
<style type="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>
<p id="app">
<p class="createForm">
姓名:<input type="text" name="uname" v-model="userName"><br>
年龄:<input type="text" name="uage" id="uage" v-model="userAge"><br>
性别:<select name="gender" v-model="selected">
<option v-for="option in options" v-bind:value="option.gender">
{{option.gender}}
</option>
</select>
{{selected}}
<br>
<button type="button" v-on:click="insertInfo">创建</button>
</p>
<table class="tab">
<tr style="background-color: pink">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>删除</th>
</tr>
<tr v-for="(person,index) in infoArr">
<td>{{person.uname}}</td>
<td>{{person.uage}}</td>
<td>{{person.gender}}</td>
<td><button v-on:click="deleteInfo(index)">删除</button></td>
</tr>
</table>
</p>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"hello",
selected:'女',
userName:'',
userAge:'',
options:[
{gender:"男"},
{gender:"女"}
],
infoArr:[]
},
methods:{
//添加数据的方法
insertInfo(){
var obj={};
obj.uname=this.userName;
obj.uage=this.userAge;
obj.gender=this.selected;
this.infoArr.push(obj);
console.log(obj);
},
//删除的方法
deleteInfo(index){
this.infoArr.splice(index,1);
}
}
})
</script>Verwandte Empfehlungen:
JS fügt Ereignisse zu dynamisch erstellten Elementen hinzu
JS-Methoden zum dynamischen Erstellen von Tags und Attribute festlegen
Detaillierte Erläuterung der dynamischen Erstellungsmethode von QR-Code basierend auf node.js
Das obige ist der detaillierte Inhalt vonTeilen von Methoden zum dynamischen Erstellen und Löschen von Daten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!