相关疑难解决方法(0)

使用Vue添加/删除动态DOM元素

我已经开始学习Vue.js,我无法弄明白你将如何在Vue.js中这样做,就像我用jQuery做的那样:

<!-- 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>
Run Code Online (Sandbox Code Playgroud)

.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();
});
Run Code Online (Sandbox Code Playgroud)

如何使用Vue创建一个全新的元素以及如何删除它?

这里全部加载在JSFiddle中

vue.js vuejs2

18
推荐指数
1
解决办法
3万
查看次数

标签 统计

vue.js ×1

vuejs2 ×1