vue2.0逻辑思维选项卡。

最新推荐文章于 2023-03-29 11:54:28 发布

Facing_the_Giants

最新推荐文章于 2023-03-29 11:54:28 发布

阅读量1.6k

点赞数 2

分类专栏： web前端代码片文章标签： vue-js

本文链接：https://blog.csdn.net/Facing_the_Giants/article/details/77740323

版权

web前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

代码片

6 篇文章 0 订阅

订阅专栏

Hello，选项卡？很简单嘛！那项目中所有数据都是‘活’的，而不是一个静态页面怎么通过vue写出vue中的选项卡呢？

页面部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
        ul{
            position: relative;
        }
        ul li{
            list-style: none;
            width: 100px;
            height: 200px;
            background: pink;
            position: absolute;
            display: none;
        }
        ol li{
            float: left;
            padding: 10px 15px;
            background: blue;
            margin-left: 15px;
            list-style: none;
            cursor: pointer;
            margin-left: 200px;
        }
        .active{
            display: block;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for='(msg,index) in msgs' :class='{active:active == index}'>{{msg}}</li>
        </ul>
        <ol>
            <li v-for='(a,index) in as' @click='add(index)'>{{a}}</li>
        </ol>
    </div>
</body>
</html>

简单看一下布局！我们的内容，跟标题的选项都是动态的，都可以通过后台请求数据得来，灵活！！！。

JS部分：

<script type="text/javascript">
        new Vue({
            el:'#box',
            data:{
                msgs:['我是内容一','我是内容二','我是内容三'],
                as:['选项卡一','选项卡二','选项卡三'],
                active:'0'
            },
            methods:{
                add(index){
                    this.active = index;
                }
            }
        })

</script>

解释一下里面的逻辑：

    v-for循环我就不解释了，相信大家比我理解的深。
    我们看一下    :class='{**active**:*active* == index}' 
    绑定class  为   **active**  我们这个加粗的active在我们的css中写到。display：block。
    而 斜体的 active 是我们vue对象中的  active : 0  我们在类里面添加了一个判断  如果 active  ==  index  我们就让当前的 li（内容） 显现出来  剩下最后一步，点击每一个按钮时对应内容出现 也就说 下标相同即可。