在 div vuejs 中添加 Html 元素

Question

我已经搜索了 4 个小时，甚至无法理解要使用什么 基本上我想在 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>

我不得不说我每次都需要在文章标签上添加一些自定义属性，这就是为什么我想在每个请求上创建一个新标签 如果我们看看这个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>