vue.js 로 행추가 및 삭제하기
2017. 9. 10. 02:13
vue.js 로 행추가 및 삭제하기
실행화면 미리보기
소스 구경하기
<html>
<head></head>
<div id="app">
<table class="table">
<thead>
<tr>
<td><strong>Name</strong></td>
<td><strong>Job</strong></td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td><input type="text" v-model="row.name"></td>
<td><input type="text" v-model="row.job"></td>
<td><a @click="removeRow(row)">Remove</a></td>
</tr>
</tbody>
</table>
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
</div>
</div>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
rows: [
{name: "홍길동",job: "직장인"},
{name: "김아무", job: "사무직"}
]
},
methods:{
addRow: function(){
this.rows.push({name:"",job:""});
},
removeRow: function(row){
//console.log(row);
this.rows.$remove(row);
}
}
});
</script>
실행해 보기
https://jsfiddle.net/13rqnvdL/
'프로그래밍 > VueJS' 카테고리의 다른 글
| vue.js 의 이전과 다음 화면 바인딩 하기 (template 사용) (2) | 2018.03.14 |
|---|---|
| emitter 무료 오픈 소스 실시간 메시징 서비스 (0) | 2017.09.26 |
| Vue.js 로 행 추가(중급기술) (0) | 2017.09.10 |
| Vue.js v2 CRUD application (0) | 2017.08.15 |
| mac 맥 환경에서 Vue.js 설치하기 (0) | 2017.08.02 |