在div vuejs中添加Html元素

Question

我已经搜索了 4 个小时，甚至无法让我的头脑明白要使用什么，基本上我想向 div 元素添加一个新行（文章标签），每次用户在我的方法中按下 add 按钮时，我如何将此 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>