vue.js - 在div vuejs中添加HTML元素

Question

我已经搜寻了4个小时，甚至无法理解我该使用什么
基本上我想每次用户按下addbutton时向div元素添加一个新行(文章标签)
在我的方法中，我如何将该HTML传递给div:

<article class="col-md-11 col-md-offset-1 card" custom_attrib=atrrib_value> <span>
{{NEW VALUE}} - {{NEW VALUE_2}}
</span>
<span >
<button class="btn btn-theme btn-default btn-xs pull-left" @click="deleteItem" ><i class="fa fa-times inline"></i></button>
</span>
</article>

我不得不说我每次都需要在Article标签上放一些自定义属性，这就是为什么我想在每个请求上添加一个新标签
如果我们看看这个https://codepen.io/Pizzi/pen/GMOQXy
当按下+(添加)行时，我想做同样的事情，但重要的部分是带有商品标签的新行每次都需要新的custom_attrib和值

另一个jsfiddle示例:https://jsfiddle.net/50wL7mdz/17736/
而不是那些输入框将是我的文章，其中包含自定义属性和值

Answer 1

您创建一个数组。当用户单击“添加新”时，您会将新项追加到包含带有两个输入字段的HTML的数组中。当您添加它时，Vuejs将使用更改后的数据重新呈现HTML。

// Vue.js
new Vue({
  el: '#app',
  data: {
   items:[],
   item:['NEW VALUE','NEW VALUE_2'],
   
  },
  created(){
  	this.items.push(this.item);
  },
  methods: 
  {
    add()
    {
      this.item = ['</br><input type="text"/>','<input type="text"/></br>'];
      this.items.push(this.item);
    }
  }
  
})

<h2>Vue.js</h2>

<div id="app">

<article class="col-md-11 col-md-offset-1 card" custom_attrib=atrrib_value> 
<span v-for="item in items" ><span v-html="item[0]"></span> - <span v-html="item[1]"></span></span>
<span >
<button v-on:click="add" class="btn btn-theme btn-default btn-xs pull-left">
+
</button>
</span>
</article>

</div>

<!-- Vue.js -->
<script src="https://vuejs.org/js/vue.min.js"></script>