在动态 Vue 组件中进行不同的显示

Question

提前感谢您的帮助。

我有一个这样的动态组件

<div>
        <component
          :is="picture.template"
          v-for="picture in enabledPictures"
          :key="picture.title"
          :params="picture"
          :size="params.size"
          @click="onClick(picture)"
        />
    </div>
export default {
components: {
    VueSlickCarousel: () => import('vue-slick-carousel'),
    BannerOne: () =>
      import('./components/BannerOne/BannerOne'),
    BannerTwo: () =>
      import('./components/BannerTwo/BannerTwo')
  },
}

我想在此模板中管理移动和桌面显示

桌面显示正常两个组件显示相同

但在移动设备中我想在轮播中显示 bannerOne 而不是 bannerTwo 我这样做了

  <div>
    <div v-if="isMobile">
      <vue-slick-carousel :arrows="true" :dots="true">
        <component
          :is="picture.template"
          v-for="picture in enabledPictures"
          :key="picture.title"
          :params="picture"
          :size="params.size"
          @click="onClick(picture)"
        />
      </vue-slick-carousel>
    </div>
    <div v-else>
        <component
          :is="picture.template"
          v-for="picture in enabledPictures"
          :key="picture.title"
          :params="picture"
          :size="params.size"
          @click="onClick(picture)"
        />
    </div>
</div>
export default {
components: {
    VueSlickCarousel: () => import('vue-slick-carousel'),
    BannerOne: () =>
      import('./components/BannerOne/BannerOne'),
    BannerTwo: () =>
      import('./components/BannerTwo/BannerTwo')
  },
}

但是当我在移动设备上这样做时，这两个组件在轮播中怎么做？请帮忙！谢谢

Answer 1

当isMobile为true时，您可以过滤enabledPictures数组并单独显示它们。

var app = new Vue({
  el: '#app',
  data () {
    return {
      isMobile: true,
      groups: [{
        template: 'div',
        title: 'I am a <div> tag'
      }, {
        template: 'span',
        title: 'I am a <span> tag'
      }, {
        template: 'div',
        title: 'I am a <div> tag'
      }, {
        template: 'span',
        title: 'I am a <span> tag'
      }, {
        template: 'div',
        title: 'I am a <div> tag'
      }, {
        template: 'span',
        title: 'I am a <span> tag'
      }]
    };
  },
  computed: {
    groupOne () {
      return this.groups.filter(item => item.template === 'div' )
    },
    groupTwo () {
      return this.groups.filter(item => item.template === 'span' )
    }
  }
});

#app div {
  background: red;
}

span {
  background: blue;
  display: block;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="isMobile = !isMobile">Toggle mobile</button>

  <template v-if="isMobile">
    <component :is="group.template" v-for="(group, i) in groupOne" :key="`one-${i}`">
      {{ group.title }}
    </component>
    <component :is="group.template" v-for="(group, i) in groupTwo" :key="`two-${i}`">
      {{ group.title }}
    </component>
  </template>
  <component v-else :is="group.template" v-for="(group, i) in groups" :key="`all-${i}`">
    {{ group.title }}
  </component>
</div>

在动态 Vue 组件中进行不同的显示

Make a different display in a dynamic Vue component

javascript

vue-component

vuejs2