vue tab 切换

最新推荐文章于 2024-07-17 11:58:23 发布

js_daidai

最新推荐文章于 2024-07-17 11:58:23 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/js_daidai/article/details/84787539

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
    ul{
            list-style-type:none;
            overflow: hidden;
        }
        ul li{
            padding: 20px 30px;
            flex-direction:row;
            margin-left:10px;
            display: inline-block;
            background-color:#ccc;
        }
        ul li.active{
            background-color: red;
        }
</style>
<body>
  <div id="app">
       <ul>
           <li v-for="(item,index) in list" :class="{active:index==curIndex}" @click="tab(index)">{{item.title}}</li>
       </ul>
       <div>
            {{ list[curIndex].content }}
       </div>
   </div>
</body>
<script type="text/javascript">
   new Vue({
        el:"#app",
        data:{
            curIndex:0,
            list:[{
                title:"标题1",
                content:"内容1"
            },{
                title:"标题2",
                content:"内容2"
            },{
                title:"标题3",
                content:"内容3"
            },{
                title:"标题4",
                content:"内容4"
            }]
        },
        methods:{
            tab:function (idx) {
//                alert(idx)
                this.curIndex = idx;
            }
        }
    })
</script>
</html>