码迷,mamicode.com
首页 > Web开发 > 详细

关于在vuejs中动态加载不确定数量和内容的组件的解决方案

时间:2017-12-07 18:57:40      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:随机   数组   定制   效果   color   解决方案   验证   首页   关于   

在做一个门户项目的时候,客户要求需要进行私人化定制,每个人进入首页的时候可以自定义首页显示的版块

要在4.50个组件中显示随机N个组件按照每个人选定的顺序排列。需求说完了,接下来说说解决方案:

 html:

<div id="app">
  <component :is="item" v-for="item in items" :key="item"></component>
</div>

 js:

const A = { template: ‘<div>A</div>‘ }
const B = { template: ‘<div>B</div>‘ }
const C = { template: ‘<div>C</div>‘ }
const D = { template: ‘<div>D</div>‘ }

new Vue({
      el: ‘#app‘,
      data: {
          items: [A,B,D]
      },
      components: {
          A, B, C, D, E
      }
})    

 齐活了,这样就只会显示A,B,D三个组件,而C组件不会显示,且顺序也是按照数组顺序。具体实现效果还没验证,但应该在不久的以后。

 

关于在vuejs中动态加载不确定数量和内容的组件的解决方案

标签:随机   数组   定制   效果   color   解决方案   验证   首页   关于   

原文地址:http://www.cnblogs.com/syll/p/8000188.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!