<!doctype html><html lang="zh"><head><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue导航页面</title><style>body{margin: 0;padding: 0;}.search{margin: auto;width: 600px;height: 400px;}.searchBox{margin: 150px auto 0 auto;width: 400px;height: 35px;overflow: hidden;border: 2px solid #c4c7ce;border-radius: 15px;}.searchLeft{width: 15px;height: 35px;float: left;}input{height: 33px;width: 317px;float: left;font-size: 16px;border-radius: 0;border-style: none;outline: none;}.searchButton{width: 62px;height: 35px;background-color: #a917d3;border: #a917d3 solid 1px;float: left;color: white;text-align: center;line-height: 33px;}.searchButton:hover{cursor: pointer;}.nav{margin: 10px auto;width: 336px;height: 51px;}.navInfo{float: left;margin: 8px 5px 8px 5px;width: 100px;height: 35px;border-radius: 20px;text-align: center;line-height: 35px;border: 1px solid #c4c7ce;}.navInfo:hover{cursor: pointer;}</style></head><body><div class="search" id="root"><div class="searchBox"><div class="searchLeft"></div><input v-model="text" type="text" @keyup.enter="goSearch"><div class="searchButton" @click ="goSearch">搜索</div></div><div class="nav"><div class="navInfo" :style={backgroundColor:baiduStyle} @click="baidu">百度</div><div class="navInfo" :style={backgroundColor:BzStyle} @click="Bz">哔哩哔哩</div><div class="navInfo" :style={backgroundColor:ByStyle} @click="By">必应</div></div></div></body><script>const vm = new Vue({el:'#root',data:{link:"https://www.baidu.com/s?wd=",text:"",baiduStyle:"",BzStyle:"",ByStyle:"",},methods:{goSearch(){open(this.link + this.text);},baidu(){this.baiduStyle = "#c4c7ce";this.BzStyle = "";this.ByStyle = "";this.link = "https://www.baidu.com/s?wd=";},Bz(){this.baiduStyle = "";this.BzStyle = "#c4c7ce";this.ByStyle = "";this.link = "https://search.bilibili.com/all?keyword=";},By(){this.baiduStyle = "";this.BzStyle = "";this.ByStyle = "#c4c7ce";this.link = "https://cn.bing.com/search?q=";}}})</script></html><!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue导航页面</title> <style> body{ margin: 0; padding: 0; } .search{ margin: auto; width: 600px; height: 400px; } .searchBox{ margin: 150px auto 0 auto; width: 400px; height: 35px; overflow: hidden; border: 2px solid #c4c7ce; border-radius: 15px; } .searchLeft{ width: 15px; height: 35px; float: left; } input{ height: 33px; width: 317px; float: left; font-size: 16px; border-radius: 0; border-style: none; outline: none; } .searchButton{ width: 62px; height: 35px; background-color: #a917d3; border: #a917d3 solid 1px; float: left; color: white; text-align: center; line-height: 33px; } .searchButton:hover{ cursor: pointer; } .nav{ margin: 10px auto; width: 336px; height: 51px; } .navInfo{ float: left; margin: 8px 5px 8px 5px; width: 100px; height: 35px; border-radius: 20px; text-align: center; line-height: 35px; border: 1px solid #c4c7ce; } .navInfo:hover{ cursor: pointer; } </style> </head> <body> <div class="search" id="root"> <div class="searchBox"> <div class="searchLeft"></div> <input v-model="text" type="text" @keyup.enter="goSearch"> <div class="searchButton" @click ="goSearch">搜索</div> </div> <div class="nav"> <div class="navInfo" :style={backgroundColor:baiduStyle} @click="baidu">百度</div> <div class="navInfo" :style={backgroundColor:BzStyle} @click="Bz">哔哩哔哩</div> <div class="navInfo" :style={backgroundColor:ByStyle} @click="By">必应</div> </div> </div> </body> <script> const vm = new Vue({ el:'#root', data:{ link:"https://www.baidu.com/s?wd=", text:"", baiduStyle:"", BzStyle:"", ByStyle:"", }, methods:{ goSearch(){ open(this.link + this.text); }, baidu(){ this.baiduStyle = "#c4c7ce"; this.BzStyle = ""; this.ByStyle = ""; this.link = "https://www.baidu.com/s?wd="; }, Bz(){ this.baiduStyle = ""; this.BzStyle = "#c4c7ce"; this.ByStyle = ""; this.link = "https://search.bilibili.com/all?keyword="; }, By(){ this.baiduStyle = ""; this.BzStyle = ""; this.ByStyle = "#c4c7ce"; this.link = "https://cn.bing.com/search?q="; } } }) </script> </html><!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue导航页面</title> <style> body{ margin: 0; padding: 0; } .search{ margin: auto; width: 600px; height: 400px; } .searchBox{ margin: 150px auto 0 auto; width: 400px; height: 35px; overflow: hidden; border: 2px solid #c4c7ce; border-radius: 15px; } .searchLeft{ width: 15px; height: 35px; float: left; } input{ height: 33px; width: 317px; float: left; font-size: 16px; border-radius: 0; border-style: none; outline: none; } .searchButton{ width: 62px; height: 35px; background-color: #a917d3; border: #a917d3 solid 1px; float: left; color: white; text-align: center; line-height: 33px; } .searchButton:hover{ cursor: pointer; } .nav{ margin: 10px auto; width: 336px; height: 51px; } .navInfo{ float: left; margin: 8px 5px 8px 5px; width: 100px; height: 35px; border-radius: 20px; text-align: center; line-height: 35px; border: 1px solid #c4c7ce; } .navInfo:hover{ cursor: pointer; } </style> </head> <body> <div class="search" id="root"> <div class="searchBox"> <div class="searchLeft"></div> <input v-model="text" type="text" @keyup.enter="goSearch"> <div class="searchButton" @click ="goSearch">搜索</div> </div> <div class="nav"> <div class="navInfo" :style={backgroundColor:baiduStyle} @click="baidu">百度</div> <div class="navInfo" :style={backgroundColor:BzStyle} @click="Bz">哔哩哔哩</div> <div class="navInfo" :style={backgroundColor:ByStyle} @click="By">必应</div> </div> </div> </body> <script> const vm = new Vue({ el:'#root', data:{ link:"https://www.baidu.com/s?wd=", text:"", baiduStyle:"", BzStyle:"", ByStyle:"", }, methods:{ goSearch(){ open(this.link + this.text); }, baidu(){ this.baiduStyle = "#c4c7ce"; this.BzStyle = ""; this.ByStyle = ""; this.link = "https://www.baidu.com/s?wd="; }, Bz(){ this.baiduStyle = ""; this.BzStyle = "#c4c7ce"; this.ByStyle = ""; this.link = "https://search.bilibili.com/all?keyword="; }, By(){ this.baiduStyle = ""; this.BzStyle = ""; this.ByStyle = "#c4c7ce"; this.link = "https://cn.bing.com/search?q="; } } }) </script> </html>
界面展示
![图片[1]-Vue导航页面-挨踢星球](https://edevplat.com/wp-content/uploads/2022/09/vuedh1.jpg)
© 版权声明
THE END
暂无评论内容