vue案例改造

這是第一個改造的案例，僅根據本身所學的進行部分的重寫
首先拿到公司的以前的奧克斯的一個主頁。這個主頁比較簡單，結構簡潔，特效全是css3
很適合作第一個改寫的案例。
說幹就幹
1.banner部分配合swiper插件的改寫

這裏用到了swiper插件，只要寫對html結構，已經樣式再調用swiper實例就好了
那麼用Vue該如何寫呢？
這種多個相同的結構的第一時間就想到了v-for，
首先先new一個vue實例吧
再模擬下數據寫個json文件

這個實例裏圖片顯示是用背景的形式，這和日常直接插入圖片有點不一樣。
那就簡單粗暴給五個設置背景

背景樣式設置好就該去改寫html部分啦

v-for 遍歷，綁定一個key值，並用v-bind 綁定一個swiperlist的樣式
在vue實例裏面data裏面定義一個空數組

在motheds裏面定義一個填寫數據的方法：

在mounted裏面再調用這個函數：

這樣初步的結構就渲染到頁面上啦