element tp6实现轮播图

引入在线的   

  <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <!-- 引入axios -->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

                                                                                                                                         HTML

<div id="app">
        <!--    轮播    -->
        <el-aside width=70%>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>轮播图</span>
                </div>
                .
                <div class="text item">
                    <div class="block">
                        <el-carousel height="600px">
                            <el-carousel-item v-for="(item,value) in banner">
                                <img :src="item.image" style="width: 100%" height="100%">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </el-card>
        </el-aside>
</div>

                                                                                                                                                  JS

 var vm = new Vue({
        el: "#app",
        data: {
            banner: []
        },
        created: function () {
            var that = this
            axios.get("banner")
                .then(res => {
                    // console.log(res.data.data)
                    that.banner = res.data.data
                }).catch(function (error) {
                console.log(error)
            });
        },
        methods: {}
    })

                                                                                                                                                  CSS

 <style>
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
        }
 </style>

                                                                                                                                         controller

public function banner(){
         $res=Banner::image();
         if ($res!==false){
             return json(["code"=>1,"data"=>$res,"msg"=>"轮播图"]);
         }
    }

                                                                                                                                             model

  static public function image()
    {
        $res = Banner::select();
        $res && $res = $res->toArray();
        return $res;
    }