Vue导航页面

<!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导航页面-挨踢星球
© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
No matter what happened in the past, you have to believe that the best is yet to come.
无论过去发生过什么,你都要相信,最好的尚未到来
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容