vue.js - vue1.0 如何点击一个按钮添加不存在的组件(不是手动编辑或注册的)。
本文介绍了vue.js - vue1.0 如何点击一个按钮添加不存在的组件(不是手动编辑或注册的)。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
例如，
点击加号之后，添加一个tab3。如何实现呢，万分感谢。
代码链接在此，之前没有描述清楚，望谅解。
示例代码
解决方案
显示tab的时候用v-for,点击添加时使v-for绑定的数组添加一项。大概如下：
<div class="tab" v-for="item in items">tab {{ $index }}</div>
<div class="create-tab" v-on:click="createTab"></div>
...
data: function () {
return {
items: [...]
}
},
methods: {
createTab: function () {
items.push(newTab)
},
...按照题主给的代码进行了修改：
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h4>Vue demo - Tab</h4>
<div id="app">
<div class="tab-box">
<span v-for="view in views" v-on:click="currentView=$index" :class="currentView==$index ? 'curr' : ''">{{ view.title }}</span>
<a href="#" v-on:click="createView(`tab${views.length + 1}`, `con${views.length + 1}`)">添加</a>
</div>
<div class="con-box">
<my-view v-bind:view="views[currentView]"></my-view>
</div>
<template id="con">
<div class="con">{{ view.content }}</div>
</template>
</div>
</div>
</div>
<script>
//注册
Vue.component('myView', {
props: ['view'],
template: '#con'
})
var vm = new Vue({
el:'#app',
data:{
currentView: 0,
views: [
{ title: 'tab1', content: 'con1' },
{ title: 'tab2', content: 'con2' }
]
},
methods: {
createView: function (title, content) {
this.views.push({ title: title, content: content })
}
}
});
</script>
</body>题主你可以对照原来的代码看一下，这段代码直接替换原来的body部分就可以用。
这篇关于vue.js - vue1.0 如何点击一个按钮添加不存在的组件(不是手动编辑或注册的)。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
