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

<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" />