本文實(shí)例為大家分享了vue實(shí)現(xiàn)帶放大鏡的搜索框，供大家參考，具體內(nèi)容如下

字體圖標(biāo)在input單標(biāo)簽中的用法：

第一步，先在main.js 中全局引入iconfont圖標(biāo)；第二步，給input 標(biāo)簽動(dòng)態(tài)綁定一個(gè)屬性，設(shè)置值為data中的變量；第三步，將字體圖標(biāo)代碼中的 &#x 改為 u

代碼如下：

<template> <div class='login'><!--頭部搜索 --> <div class='top'> <div class='top-text iconfont'>廣州&#xe612;</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 請(qǐng)輸入關(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。