本文實例為大家分享了vue實現帶放大鏡的搜索框，供大家參考，具體內容如下

字體圖標在input單標簽中的用法：

第一步，先在main.js 中全局引入iconfont圖標；第二步，給input 標簽動態綁定一個屬性，設置值為data中的變量；第三步，將字體圖標代碼中的 &#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 請輸入關鍵詞’ }} }</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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。