<div id="box"><div class="content">? ? ? ? ? ? <div class="swiper-container animated fadeInRightBig">? ? ? ? ? ? ? ? <div class="swiper-wrapper" style="transform: translate3d(-288.5px, 0px, 0px)">//這里是組件? ? ? ? ? ? ? ? ? ? <my-article v-for="item in list" v-bind:detial="item"></my-article>//這里是組件? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? <!-- Add Pagination -->? ? ? ? ? ? ? ? <div class="swiper-pagination"></div>? ? ? ? ? ? </div></div></div><script>? ? Vue.component('my-article', {? ? ? ? prop: ["detail"],? ? ? ? template: `<div class="swiper-slide">? ? ? ? ? ? ? ? ? ? ? ? <div class ="img" style="background:url(/Images/Admin.jpg) no-repeat center center;background-size: 100%;width:60%;margin:0 auto;">? ? ? ? ? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? ? ? ? ? <div class="Gradients">? ? ? ? ? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? ? ? ? ? <a href="/Home/Admin">? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>{{item}}</p>? ? ? ? ? ? ? ? ? ? ? ? </a>? ? ? ? ? ? ? ? ? ? </div>`? ? })? ? ? ? var vm = new Vue({? ? ? ? ? ? el: "#box",? ? ? ? ? ? data: {? ? ? ? ? ? ? ? ? ? list: ["/Images/show1.png", "/Images/login.jpg", "/Images/lesson.jpg", "/Images/Attendance.png", "/Images/Member.jpg", "/Images/Questionnaire.jpg", "/Images/Survey.png", "/Images/work_and_rest_time.jpg"]? ? ? ? ? ? }? ? ? ? })</script>