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

Posted 2023-02-22

【中文标题】使用 Vue 添加/删除动态 DOM 元素

【英文标题】：Dynamic DOM elements add/remove with Vue

【发布时间】：2017-07-19 09:10:12

【问题描述】：

我已经开始学习 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>

.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

【参考方案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)
    
  

)

更好的选择是将它分解成组件，但到目前为止，这很好。

【讨论】：

它有效...但是为什么将table和tr标签更改为ul和li...有关系吗？

在我看来不是 = jsbin.com/padecawido/1/edit?html,js,output

没关系，我只是用更快的方式:)

inputs这个词是vue中的某种关键字吗？

我不这么认为，但不确定 - github.com/vuejs/vue/blob/dev/src/compiler/error-detector.js