vue實(shí)現(xiàn)帶放大鏡的搜索框
更新時間：2021年08月18日 17:07:59 作者：vevezai
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)帶放大鏡的搜索框，供大家參考，具體內(nèi)容如下
字體圖標(biāo)在input單標(biāo)簽中的用法：
第一步，先在main.js 中全局引入iconfont圖標(biāo)；
第二步，給input 標(biāo)簽動態(tài)綁定一個屬性，設(shè)置值為data中的變量；
第三步，將字體圖標(biāo)代碼中的 &#x 改為 \u
代碼如下：
<template>
<div class="login">
<!--頭部搜索 -->
<div class="top">
<div class="top-text iconfont">廣州</div>
<div class="top-btn">
<input type="text" :placeholder="icon" class="iconfont">
</div>
<div class="top-x iconfont iconlingdang1"></div>
</div>
</div>
</template>
<script>
export default {
name:"Login",
data(){
return {
icon:'\ue637 請輸入關(guān)鍵詞'
}
}
}
</script>
<style scoped>
.login{
width: 100%;
height: 100%;
}
.top{
width: 100%;
height: 0.8rem;
background-color: pink;
display:flex;
align-items: center;
font-size:0.35rem;
}
.top-text{
margin-left:0.3rem;
}
.top-btn{
width: 4.8rem;
height: 0.5rem;
margin-left:0.2rem;
margin-right:0.55rem;
}
.top-btn>input{
width: 100%;
height:0.5rem;
border-radius:1rem;
border:none;
outline: none;
padding-left:0.3rem;
}
</style>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue用cmd創(chuàng)建項(xiàng)目的方法講解，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02
這篇文章主要介紹了vue.js實(shí)現(xiàn)的幻燈片功能,結(jié)合實(shí)例形式分析了vue.js實(shí)現(xiàn)幻燈片的相關(guān)樣式、配置、功能等操作技巧,需要的朋友可以參考下2019-01-01
解決vue?app.js/vender.js過大優(yōu)化啟動頁
這篇文章主要為大家介紹了解決vue?app.js/vender.js過大優(yōu)化啟動頁過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue全局組件與局部組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
vue+element ui實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要為大家詳細(xì)介紹了vue+element ui實(shí)現(xiàn)錨點(diǎn)定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Vue響應(yīng)式原理Observer、Dep、Watcher理解
這篇文章主要介紹了Vue響應(yīng)式原理-理解Observer、Dep、Watcher,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲方式)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue 路由 過渡動效 數(shù)據(jù)獲取方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
打開尤大大的GitHub，發(fā)現(xiàn)多了個叫 petite-vue 的東西,Vue3 和 Vite 還沒學(xué)完呢，又開始整新東西了？本文就來介紹一下2021-07-07
這篇文章主要介紹了vue-cli設(shè)置publicPath小記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04