这里不跟大家再去把 vue 文档上的一些指令用法或者基础知识再复述一遍, 既然是从入门到实战, 我直接将平时项目中需要实现的一些效果拆分成模块. 你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查, 再回过头来看我的实现代码. 记住, 通读 Vue 文档真的很重要, 很重要!
这里的 Vue 以单文件的形式引入, 另外代码在实现上会一步步的进行优化, 客官不要着急!
下面是一个样式稍微丑陋, 但功能 OK 的选项卡.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
- <meta name="apple-mobile-web-app-title" content="Vue 选项卡">
- <title>Vue 实现选项卡 </title>
- <script type="text/javascript" src="../js/vue.js"></script>
- </head>
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- .box {
- width: 800px;
- height: 200px;
- margin: 0 auto;
- border: 1px solid #000;
- }
- .tabs li {
- float: left;
- margin-right: 8px;
- list-style: none;
- }
- .tabs .tab-link {
- display: block;
- width: 250px;
- height: 49px;
- text-align: center;
- line-height: 49px;
- background-color: #5597B4;
- color: #fff;
- text-decoration: none;
- }
- .tabs .tab-link.active {
- height: 47px;
- border-bottom: 2px solid #E35885;
- transition: .3s;
- }
- .cards {
- float: left;
- }
- .cards .tab-card {
- display: none;
- }
- .clearfix:after {
- content: "";
- display: block;
- height: 0;
- clear: both;
- }
- .clearfix {
- zoom: 1;
- }
- </style>
- <body>
- <div id="app" class="box">
- <ul class="tabs clearfix">
- <li v-for="(tab,index) in tabsName">
- <a href="#" rel="external nofollow" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>
- </li>
- </ul>
- <div class="cards">
- <div class="tab-card" style="display: block;"> 这里是 HTML 教程 </div>
- <div class="tab-card"> 欢迎来到 CSS 模块 </div>
- <div class="tab-card"> 嗨, 这里是 Vue</div>
- </div>
- </div>
- </body>
- <script>
- var app = new Vue({
- el: "#app",
- data: {
- tabsName: [{
- name: "HTML",
- isActive: true
- }, {
- name: "CSS",
- isActive: false
- }, {
- name: "Vue",
- isActive: false
- }],
- active: false
- },
- methods: {
- tabsSwitch: function(tabIndex) {
- var tabCardCollection = document.querySelectorAll(".tab-card"),
- len = tabCardCollection.length;
- for(var i = 0; i <len; i++) {
- tabCardCollection[i].style.display = "none";
- this.tabsName[i].isActive = false;
- }
- this.tabsName[tabIndex].isActive = true;
- tabCardCollection[tabIndex].style.display = "block";
- }
- }
- })
- </script>
- </html>
第一代选项卡的实现就先这样子, 后面再改进. 上面是代码, 下面是效果图! Vue 我也只是刚刚学入门吧, 做了几个项目了, 有什么问题我们可以一起探讨, 一起进步, 欢迎私信我!
Vue 实现选项卡切换, 具体代码如下所示:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 选项卡 </title>
- <script src="../js/vue.js"></script>
- <style>
- li{
- list-style: none;
- float: left;
- margin-right: 20px;
- }
- </style>
- </head>
- <body>
- <div class="app">
- <ul>
- <li v-for="(item,index) in list" @click="tab(index)">{{item.tab}}
- <div v-show="item.show">
- {{item.title}}
- </div>
- </li>
- </ul>
- </div>
- <script>
- let obj=[
- {"tab":"选项一","show":true,"title":"1111"},
- {"tab":"选项二","show":false,"title":"2222"},
- {"tab":"选项三","show":false,"title":"3333"}
- ];
- var vm=new Vue({
- el:".app",
- data:{
- list:obj
- },
- methods:{
- tab:function(index){
- for(var i=0;i<this.list.length;i++){
- this.list[i].show=false;
- if(i==index){
- this.list[index].show=true;
- }
- }
- }
- }
- })
- </script>
- </body>
- </html>
总结
以上所述是小编给大家介绍的 vue 实现选项卡及选项卡切换效果, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/138827.htm