vue案例改造

2021-09-16 21:43:44 字數 986 閱讀 7040

這是第乙個改造的案例,僅根據自己所學的進行部分的重寫

首先拿到公司的之前的奧克斯的乙個主頁。這個主頁比較簡單,結構簡潔,特效全是css3

很適合做第乙個改寫的案例。

說幹就幹

1.banner部分配合swiper外掛程式的改寫

這裡用到了swiper外掛程式,只要寫對html結構,已經樣式再呼叫swiper例項就行了

那麼用vue該如何寫呢?

這種多個相同的結構的第一時間就想到了v-for,

首先先new乙個vue例項吧

再模擬下資料寫個json檔案

這個例項裡顯示是用背景的形式,這和平常直接插入有點不同。

那就簡單粗暴給五個設定背景

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

v-for 遍歷,繫結乙個key值,並用v-bind 繫結乙個swiperlist的樣式

在vue例項裡面data裡面定義乙個空陣列

在motheds裡面定義乙個填寫資料的方法:

在mounted裡面再呼叫這個函式:

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

Vue 登入案例

這篇文章主要是介紹如何用vue springboot來實現乙個簡單前後端分離的登入案例,比較詳細。apioperation 登入功能 responsebody public result dologin requestparam username string username,requestpar...

vue入門案例

1 技術在迭代,有時候你為了生活沒有辦法,必須掌握一些新的技術,可能你不會或者沒有時間造輪子,那麼就先把利用輪子吧。2 掛載點,模板,例項之前的關係 1239 1011 1213 141516 171819 202140 413 vue中方法的使用以及屬性的改變,vue例項中的資料,事件,方法。12...

前端 vue入門案例

第一步 建立html 檔案 使用vscode快捷鍵 生成html lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head body html 第二步 引入v...