介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> & lt;/title>
& lt;风格类型=拔谋?css"比;
* {
保证金:0 px汽车;
填充:0 px;
}
#应用{
margin-top: 50 px;
宽度:400 px;
身高:300 px;
边界:1 px固体# 000000;
}
李{
list-style:没有;
浮:左;
宽度:100 px;
高度:50 px;
行高:50 px;
字体大小:18 px;
粗细:大胆的;
背景:继续;
text-align:中心;
光标:指针;
}
#穿div {
宽度:400 px;
身高:250 px;
行高:250 px;
字体大小:20 px;
粗细:大胆的;
text-align:中心;
}
#穿img {
宽度:400 px;
身高:250 px;
}
.active {
背景:# 405 c83;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt; ul>
李& lt; v:点击=皊earId=1,v-bind:类=皗活跃:searId==1}“祝辞1 & lt;/li>& lt; !——v-bind可以省略——比;
& lt;李@click=皊earId=2,:类=皗活跃:searId==2}“祝辞2 & lt;/li>
& lt;李@click=皊earId=3,:类=皗活跃:searId==3}“祝辞3 & lt;/li>
& lt;李@click=皊earId=4,:类=皗活跃:searId==4}“祝辞4 & lt;/li>
& lt;/ul>
& lt; div id=皐ear"祝辞
& lt; div v-show=皊earId==1”;祝辞& lt; img src=? ./img/chun.png"祝辞& lt;/div>
& lt; div v-show=皊earId==2“祝辞& lt; img src=? ./img/xia.png"祝辞& lt;/div>
& lt; div v-show=皊earId==3“祝辞& lt; img src=? ./img/qiu.png"祝辞& lt;/div>
& lt; div v-show=皊earId==4“祝辞& lt; img src=? ./img/dong.png"祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;脚本src=? ./js/vue.js"类型=拔谋?javascript"charset=皍tf-8"祝辞& lt;/script>
& lt;脚本类型=拔谋?javascript"比;
新Vue ({
埃尔:“# app"
数据:{
searId: 1//第一个为默认
}
})
& lt;/script>
& lt;/html>
今天就跟大家聊聊有关利用Vue制作一个菜单切换功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
具体内容如下
完整代码
看完上述内容,你们对利用Vue制作一个菜单切换功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
