Vue Vant 實現頂部關鍵字搜尋欄

:

<

section 
class
="city-search"
>
<
van-icon 
class
="search-icon"
name
="search"
/>
<
input  
placeholder
="請輸入城市關鍵字"
v-model
="keyword"
>
<
van-icon 
class
="clear-icon"
name
="clear"
v-show
="keyword"
@click
="clearsearchinput"
/>
section
>

很明顯需要新增 css 美化。

css 如下：

.city-search input .clear-icon }

data() 

},methods: 
}

我們可以看到，已經是一個相對美觀的佈局了。