Heim > Artikel > Web-Frontend > Vue implementiert Methoden zum dynamischen Erstellen und Löschen von Daten
Vue implementiert Methoden zum dynamischen Erstellen und Löschen von Daten
- 亚连Original
- 2018-05-29 16:29:501359Durchsuche
Im Folgenden werde ich einen Artikel über die Methode von Vue zum dynamischen Erstellen und Löschen von Daten mit Ihnen teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.
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>Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Das Problem und die Lösung des {{}}-Flimmerns beim Rendern von Vue
Methode zum Erhalten von Kontextparameterwerten mithilfe des EL-Ausdrucks in JS
Das obige ist der detaillierte Inhalt vonVue implementiert Methoden zum dynamischen Erstellen und Löschen von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!