ElementUI走馬燈案例

這種ElementUI走馬燈案例 ----------vue框架操作

1.先使用npm安裝           npm i element-ui -S

2.在 main.js中引入Element,一般引入這三行就可以

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.然後在組件中使用,複製以下代碼,就可以實現了

 

 

<template>
    <div>
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(img,index) in imglist" :key="index">
          <img v-bind:src="img.url">
        </el-carousel-item>
      </el-carousel>
    </div>
</template>

<script>
    export default {
        name: "Element",
      data(){
          return{
            imglist:[
              {url:require('./../assets/f.jpg')},
              {url:require('./../assets/a.jpg')},
        
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章