动态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) 
    } 
    } 

}) 

更好的选择是可能分解成组成部分，但是这是到目前为止，一切都很好。