動態DOM元素與Vue公司

Question

添加/刪除我已經開始學習Vue.js就像我用jQuery做的我不出來，你會怎麼做這Vue.js：

<!-- jQuery --> 
<h2>jQuery</h2> 
<table id="t1"> 
    <tr> 
    <th>Item</th> 
    <th>Quantity</th> 
    </tr> 
    <tr id="r1"> 
    <td><input name="item[]" type="text"/></td> 
    <td><input name="quantity[]" type="number"/></td> 
    <td><button class="deleteRow">X</button></td> 
    </tr> 
</table> 
<button id="addRow">Add Row</button> 

.js

// jQuery 
$(document).on('click', '#addRow', function(){ 
    var row = parseInt($('#t1 tr:last-child').attr('id')) + 1; 
    alert(row); 
     $('#t1').append('<tr id="r'+row+'"><td><input name="item[]" type="text"/></td><td><input name="quantity[]" type="number"/></td><td><button class="deleteRow">X</button></td></tr>'); 
}); 

$(document).on('click', '.deleteRow', function(){ 
     var row = parseInt($(this).closest('tr').attr('id')); 
    $('#r'+row).remove(); 
}); 

如何用Vue點擊創建一個全新元素以及如何刪除它？

這裏被全部裝入JSFiddle

Answer 1

VueJS是數據驅動的，所以直接DOM操作忘記。

在下面的示例中，您會看到我已經定義了inputs數組 - 這是我們將存儲所有行的位置 - 因此它將是對象數組。

在我們的模板中，我們遍歷了inputs數組，對於每個輸入我們也發送索引 - 這是行刪除所必需的。

addRow是方法將新對象推送到我們的inputs數組（具有預定義模式），併爲其提供唯一索引。

這裏是例子：http://jsbin.com/zusokiy/edit?html,js,output

模板：

<div id="app"> 

    <ul> 
     <li v-for="(input, index) in inputs"> 
     <input type="text" v-model="input.one"> - {{ input.one }} 
     <input type="text" v-model="input.two"> - {{ input.two }} 
     <button @click="deleteRow(index)">Delete</button> 
     </li> 
    </ul> 

    <button @click="addRow">Add row</button> 

    </div> 

JS：

const app = new Vue({ 

    el: '#app', 

    data: { 
    inputs: [] 
    }, 

    methods: { 
    addRow() { 
     this.inputs.push({ 
     one: '', 
     two: '' 
     }) 
    }, 
    deleteRow(index) { 
     this.inputs.splice(index,1) 
    } 
    } 

}) 

更好的選擇是可能分解成組成部分，但是這是到目前爲止，一切都很好。