这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过头来看我的实现代码。记住,通Vue文读档真的很重要,很重要。
这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化,客官不要着急!
下面是一个样式稍微丑陋,但功能好的的选项卡。
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘,chrome=1”比;
& lt;元name=笆哟啊蹦谌?白畲蠓段?1.0,最小规模=1.0,user-scalable=不,宽度=设备宽度比;
& lt;元name=癮pple-mobile-web-app-title”内容=癡ue选项卡”在
& lt; title> Vue实现选项卡& lt;/title>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/js/vue.js "祝辞& lt;/script>
& lt;/head>
& lt; style>
* {
填充:0;
保证金:0;
}
.box {
宽度:800 px;
身高:200 px;
保证金:0汽车;
边界:1 px固体# 000;
}
李.tabs {
浮:左;
margin-right: 8 px;
list-style:没有;
}
.tabs .tab-link {
显示:块;
宽度:250 px;
高度:49 px;
text-align:中心;
行高:49 px;
background - color: # 5597 b4;
颜色:# fff;
文字修饰:没有;
}
.tabs .tab-link。活跃的{
高度:47 px;
边界底部:2 px固体# E35885;
过渡:3;
}
.cards {
浮:左;
}
.cards .tab-card {
显示:没有;
}
.clearfix:{后
内容:“”;
显示:块;
高度:0;
明确:;
}
.clearfix {
变焦:1;
}
& lt;/style>
& lt; body>
& lt; div id=坝τ谩眂lass=昂凶印北?
& lt; ul类="标签clearfix "比;
& lt;李v="选项卡中,指数在tabsName”比;
& lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”类=皌ab-link @click”=皌absSwitch(指数)”v-bind: class="{活跃:tab.isActive}”在{{tab.name}} & lt;/a>
& lt;/li>
& lt;/ul>
& lt; div类=翱ㄆ北?
& lt; div类=" tab-card "在这里是HTML教程& lt;/div>
& lt; div类=" tab-card "祝辞欢迎来到CSS模块& lt;/div>
& lt; div类=" tab-card "祝辞嗨,这里是Vue
& lt;/div>
& lt;/div>
& lt;/body>
& lt; script>
应用var=new Vue ({
埃尔:“#应用”,
数据:{
tabsName: [{
名称:“HTML”,
isActive:真
}, {
名称:“CSS”,
isActive:假
}, {
名称:“Vue”,
isActive:假
}),
活动:假
},
方法:{
tabsSwitch:函数(tabIndex) {
var tabCardCollection=document.querySelectorAll (“.tab-card”),
len=tabCardCollection.length;
(var=0;我& lt;兰;我+ +){
tabCardCollection[我].style。显示=懊挥小?
this.tabsName[我]。isActive=false;
}
this.tabsName [tabIndex]。isActive=true;
tabCardCollection tabIndex .style。显示=翱椤?
}
}
}）
& lt;/script>
& lt;/html>之前
第一代选项卡的实现就先这样子,后面再改进上。面是代码,下面是效果图! Vue我也只是刚刚学入门吧,做了几个项目了,有什么问题我们可以一起探讨,一起进步,欢迎私信我!
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>选项卡& lt;/title>
& lt;脚本src=" https://www.yisu.com/js/vue.js "祝辞& lt;/script>
& lt; style>
李{
list-style:没有;
浮:左;
margin-right: 20 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=在“应用程序”;
& lt; ul>
& lt;李v="(项目、索引)名单”@click=毖∠羁?指数)”在{{item.tab}}
& lt; div v-show=癷tem.show”比;
{{item.title}}
& lt;/div>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; script>
让obj=[
{“选项卡”:“选项一”,“显示”:真的,“标题”:" 1111 "},
{“选项卡”:“选项二”,“显示”:假的,“标题”:" 2222 "},
{“选项卡”:“选项三”,“显示”:假的,“标题”:" 3333 "}
];
var vm=new Vue ({
埃尔:“.app”,
数据:{
列表:obj
},
方法:{
标签:函数(指数){
我(var=0; i< this.list.length;我+ +){
this.list[我],告诉=false;
如果(我==指数){
this.list(指数),告诉=true;
}
}
}
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
