div vuejs에 HTML 요소 추가

div vuejs에 HTML 요소 추가

4시간 동안 검색했지만 기본적으로 무엇을 사용해야 하는지 이해할 수조차 없습니다.사용자가 제 메서드의 add 버튼을 누를 때마다 새로운 행(기사 태그)을 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_disples와 값이 필요하다는 것입니다.시간

또 다른 jsfiddle 예: 이러한 입력 상자 대신 https://jsfiddle.net/50wL7mdz/17736/이 커스텀 속성과 값을 가진 내 기사가 될 것입니다.

배열을 만들어라.사용자가 "신규 추가"를 클릭하면 두 개의 입력 필드가 있는 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>

언급URL : https://stackoverflow.com/questions/52424306/add-html-element-in-div-vuejs