在 div vuejs 中添加 Html 元素 [英] Add Html element in div vuejs

问题描述

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

<跨度>{{新价值}} - {{新价值_2}}</span><跨度><button class="btn btn-theme btn-default btn-xs pull-left"@click="deleteItem" ><i class="fa fa-times inline"></i></按钮></span></文章>

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

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

解决方案

您创建一个数组.当用户单击添加新"时，您将向包含带有两个输入字段的 HTML 的数组追加一个新项目.当您追加它时，Vuejs 将使用更改后的数据重新渲染 HTML.

//Vue.js新的 Vue({el: '#app',数据: {项目:[]，项目:['新价值'，'新价值_2']，},创建(){this.items.push(this.item);},方法:{添加(){this.item = ['</br><input type="text"/>','<input type="text"/></br>'];this.items.push(this.item);}}})

<h2>Vue.js</h2><div id="应用程序"><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><跨度><button v-on:click="add" class="btn btn-theme btn-default btn-xs pull-left">+</span></文章>

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

I have been searching for 4 hours , cant even get my head to understand what to use basically i want to add a new row (article tag) to a div element , everytime the user press the addbutton in my method how can i pass this HTMLto the 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>

I have to say i need to put some custom attrib on the Article tag each time thats why i want to make a new tag on each request if we take a look at this https://codepen.io/Pizzi/pen/GMOQXy when pressing the + (add) a row drops , i want to do the same thing but the important part is the new row with article tag needs new custom_attrib and value everytime

another jsfiddle example : https://jsfiddle.net/50wL7mdz/17736/ instead of those input box will be my article with custom attrib and value

解决方案

You make an array. When the user clicks "add new" you will append a new item to the array which contains HTML with two input fields. When you append it, Vuejs will re-render the HTML with the changed data.

// 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>

这篇关于在 div vuejs 中添加 Html 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！