您的位置:首页 > 编程学习 > > 正文

vue获取图片并展示(vue卡片式点击切换图片组件使用详解)

更多 时间:2021-10-23 10:22:29 类别:编程学习 浏览量:1087

vue获取图片并展示

vue卡片式点击切换图片组件使用详解

本文实例为大家分享了vue卡片式点击切换图片组件,供大家参考,具体内容如下

因为公司业务的问题,最近在写vue项目,有了一个卡片图片的点击的需求,自己又不想写动画效果,就偷个懒,采用vue是以数据驱动的原理,写了一个不太完整的vue组件,为了简单,就直接上代码吧

全部代码

未进行props传参设置,以后完善(简单最好嘛)

  • <template>
     <!-- 
     *以数据驱动的card式展示图片(无动画效果)
     *  -->
     <li class="cardBanner">
       <ul>
        <li v-for="(item,index) in cardData" :key="index">
         <a href="#">
          <img :src="item.src" alt="">
          <p>这图片的描述{{item.order}}</p>
         </a>
        </li>
        <li class="arrow-left" @click="toggleFun(-1)">&lt;</li>
        <li class="arrow-right" @click="toggleFun(1)">&gt;</li>
       </ul>
     </li>
    </template>
    
    <script>
     export default {
      data(){
       return {
        cardData: [
         {id:1,src:require('../assets/images/banner.jpg" alt="vue获取图片并展示(vue卡片式点击切换图片组件使用详解)" border="0" />
    
  • 效果展示

    vue获取图片并展示(vue卡片式点击切换图片组件使用详解)

    稍微讲一下,采用flex!!!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    您可能感兴趣