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 分享
Hard-working is actually a cool thing.
努力学习其实是一件很酷的事
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容