zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    go install
    web网络安全系统
    Web图片分享系统
    web图库网站
    web视频播放网站
    web商业银行管理平台
    web科技管理信息平台
    web工艺品销售平台
    web房产网站
    感谢!
  • 原文地址:https://www.cnblogs.com/qiuchuanji/p/7661711.html
Copyright © 2011-2022 走看看