我有这样的伪vue-js循环:
var j = 0;
for(var i = 0; i < 100; i ++){
<item-component></item-component>
if(i % 10 === 0){
<component :is="'advertising-block-' + j"></component>
j ++;
}
}
如何将其覆盖到vue模板?
我需要在每十分之一之后显示不同的广告块,并且该组件(块)的名称应为:
advertising-block-0
advertising-block-1
...
advertising-block-10 (last one after 100th item).
您可以使用v-for
进行100次迭代,然后在每十分之一项目之后显示一个广告组件(这应该是一个常见的组件j
,用于显示相应的项目)v-if
:
const itemcomponent = Vue.component('itemcomponent', {
template: '#itemcomponent',
});
const advertisingblock = Vue.component('advertisingblock', {
template: '#advertisingblock',
props: ['id']
});
new Vue({
el:"#app",
components: { itemcomponent, advertisingblock }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template id="itemcomponent">
<div>item</div>
</template>
<template id="advertisingblock">
<div>advertising-block-{{id}}</div>
</template>
<div id="app">
<div v-for="i in 100">
<div><itemcomponent/></div>
<div v-if="i%10===0"><advertisingblock :id="i/10"/></div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句