Vue는 데이터를 동적으로 생성하고 삭제하는 메서드를 구현합니다.
- 亚连원래의
- 2018-05-29 16:29:501394검색
이제 Vue에서 데이터를 동적으로 생성하고 삭제하는 방법을 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
보기:
코드는 다음과 같습니다.
<!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>위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.
관련 기사:
vue에서 렌더링 시 {{}} 깜박임 문제 및 해결 방법
j텍스트가 1줄, 2줄 또는 지정된 줄 수를 초과할 때 자동으로 줄임표를 추가하는 쿼리 방법
JS EL 표현식을 사용하여 컨텍스트 매개변수 값을 얻는 방법
위 내용은 Vue는 데이터를 동적으로 생성하고 삭제하는 메서드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.