Vue2 5開發去哪兒網App 搜尋功能完成

效果展示：

search.vue:

<

div 
class
="search-content"
ref="search"
v-show
="keyword"
>
<
ul>
<
li class
="search-item border-bottom"
v-for
="(city,index) in citylist"
:key
="index"
>}
li>
<
li class
="search-item border-bottom"
v-show
="hascity"
>
沒有找到匹配資料
li>
ul>
div>

const result =

格式： 

...

for (let i in this.cities) 

})this.citylist = result
}

if (!this

.keyword) 

computed: 

}//負責顯示與否：

沒有找到匹配資料

<

template
>
<
div>
<
div 
class
="search"
>
<
input 
type
="text"
v-model
="keyword"
class
="search-input"
placeholder
="輸入城市名或拼音"
>
div>
<
div 
class
="search-content"
ref="search"
v-show
="keyword"
>
<
ul>
<
li class
="search-item border-bottom"
v-for
="(city,index) in citylist"
:key
="index"
>}
li>
<
li class
="search-item border-bottom"
v-show
="hascity"
>
沒有找到匹配資料
li>
ul>
div>
div>
template
>
<
script
>
import bscroll from 
'better-scroll
'export 
default
},computed: 
},watch: 
this
.timer 
=settimeout(() 
=>
const result =
for(let i 
inthis
.cities) 
})this
.citylist 
=result
}}, 
100)}},
mounted () 
}script
>
<
style 
lang
="stylus"
scoped
>
@import "~styles/varibles.styl"
.search
height .72rem
padding 0 .1rem
background $bgcolor
.search-input
padding 0 .1rem
box-sizing border-box
height .62rem
line-height .62rem
width 100%
text-align center
border-radius .06rem
.search-content
overflow hidden
background #eee
position absolute
top 1.58rem
left 0
right 0
z-index: 1
bottom 0
.search-item
line-height .62rem
padding-left .2rem
color #666
background #fff
style
>

vue2 5開發去哪兒了流程

header區域開發 iconfont的使用和 優化 在src assets中放入iconfont目錄及iconfont.css 修改iconfont.css檔案中src url 路徑.iconfont iconfont.eot.在main.js中引入 建立公共樣式 在style目錄下建立varib...

2 5 去哪兒網app 前端元件化

乙個頁面由很多部分組成 比如輪播，定位等等。如果沒有元件化，則要把所有的 都寫在這個頁面的業務邏輯上，就會很多，導致維護困難。所以目的是低耦合？元件可以理解為頁面的乙個部分 區域，相當於頁面由許多元件組成，乙個button也可以看成元件。所以使用元件化進行大型專案開發，可以使 在後期維護性上得到極大...

Vue2 5從零開發貓眼 個人中心元件開發

vue2.5從零開發貓眼 前言 vue2.5從零開發貓眼 專案開始前準備 vue2.5從零開發貓眼 啟動頁開發 vue2.5從零開發貓眼 home頁開發 vue2.5從零開發貓眼 影院頁開發 vue2.5從零開發貓眼 個人中心元件開發 vue2.5從零開發貓眼 city元件開發 vue2.5從零開發...