在 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屋!