vue组件学习5(tab切换)

最新推荐文章于 2023-09-14 23:11:32 发布

编号90015478

最新推荐文章于 2023-09-14 23:11:32 发布

阅读量868

点赞数

分类专栏： vue组件学习文章标签： vue组件学习 vue组件tab切换

本文链接：https://blog.csdn.net/qq_20353887/article/details/77123736

版权

vue组件学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue-1.0.24.debug.js"></script>
    <style>
    ul,
    li {
        list-style: none;
    }
    ul {
        height: 50px;
    }
    li {
        width: 50px;
        height: 30px;
        float: left;
        border: 1px solid #ccc;
    }
    .lli{
        width: 100px;
        height: 50px;
        border: 1px solid #ccc;
    }
    </style>
</head>
<body>
    <ul>
        <li v-for="value in contentArr" @click="tabArr($index)">{{value.content}}</li>
    </ul>
    <div>
        <sop-list :my-message="contentList">
        
        </sop-list>
    </div>
    <script>
   Vue.component('sop-list', {
       template: "<ul><li class='lli' v-for='item in myMessage' v-text='item.content'></li></ul>",
       // props:["msg"]
       props:{
        myMessage:{
        type:Array,
        default:[
            {
                content:'1',
            },
            {
                content:'2',
            },
            {
                content:'3',
            },
           ]
        }
       }
   });
   var app = new Vue({
       el: "body",
       data: {
           contentArr: [
               { "content": "标题1", "key": "1" },
               { "content": "标题2", "key": "2" },
               { "content": "标题3", "key": "3" }
           ],
           contentList: [
               { "content": "标题11"},
               { "content": "标题11"},
               { "content": "标题11"}
           ]
       },
       methods: {
           tabArr: function(_index) {
            var _this = this;
            switch(_index){
            case 0: _this.contentList = [
               { "content": "标题1"},
               { "content": "标题1"},
               { "content": "标题1"}
           ]
           break;
           case 1: _this.contentList = [
               { "content": "标题2"},
               { "content": "标题2"},
               { "content": "标题2"}
           ]
           break;
           case 2: _this.contentList =[
               { "content": "标题3"},
               { "content": "标题3"},
               { "content": "标题3"}
           ]
           break;
            }
           }
       },
       
   })
    </script>
</body>


</html>

须要引入vue.js文件，contentList 可以根据后台返回的具体数据进行tab切换的内容进行更改

编号90015478

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件学习5(tab切换)

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src="js/vue-1.0.24.debug.js"
复制链接

扫一扫