首页新闻找找看学习计划

vue实现选项卡报错

0
悬赏园豆:40 [已解决问题] 解决于 2019-03-05 14:44

刚学vue,想用vue实现一个选项卡功能,可是却报错,网上查找也没查找到什么原因。麻烦大家能够帮忙指点指点,谢谢!
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>选项卡</title>
<style>

</style>



<style>
    li {
        list-style: none;
        float: left;
        margin-right: 20px;
    }
    
    .div-content-wrap {
        width: 200px;
        height: 100px;
    }
    
    .div-content {
        width: 200px;
        height: 100%;
    }
    
    .active {
        color: #ff0000;
    }
</style>

</head>

<body>

<div id="app">
    <ul class="clearfix">
        <li v-for="(list,index) in lists" :key="index" v-on:click="showCurrentcontent(index)" v-bind:class="{active: isActive == index}">
            {{list}}
        </li>
    </ul>
    <div class="div-content-wrap">
        <component is="currentTabContent"></component>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var lists = [
        "选项卡1",
        "选项卡2",
        "选项卡3"
    ];
    var content1 = {
        template: "<div class='div-content'>选项卡1</div>"
    };
    var content2 = {
        template: "<div class='div-content'>选项卡2</div>"
    };
    var content3 = {
        template: "<div class='div-content'>选项卡3</div>"
    };
    new Vue({
        el: "#app",
        data: {
            index: 0,
            lists: lists,
            isActive: 0,
            arr: [content1, content2, content3]
        },
        components: {
            "content1": content1,
            "content2": content2,
            "content3": content3
        },
        computed: {
            currentTabContent: function() {
                return this.arr[this.isActive]
            }
        },
        method: {
            showCurrentcontent: function(index) {
                console.log(index);
                this.isActive = index;
            }
        }
    })
</script>

</body>

</html>

qwerasdfzxc的主页 qwerasdfzxc | 初学一级 | 园豆:2
提问于:2019-02-26 22:33
< >
分享
最佳答案
0
<component is="currentTabContent"></component>
Vue.component('componentName', {
    template: '<h1>自定義element</h1>'
})

你少了自定義標籤的定義區塊
componentName 可以自訂,但不要使用保留字 component

收获园豆:40
RosonJ | 老鸟四级 |园豆:3279 | 2019-02-27 11:23
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册