应该如何修改

来源：4-16 自由编程

Aurora_Meteor

2020-05-23 10:42:30

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        #container {
            border: 1px solid #eee;
            display: inline-block;
            margin: 0 auto;
        }

        span {
            padding: 20px 10px;
        }

        p {
            text-align: center;
        }

        .active {
            background: #eee;
        }
    </style>
</head>

<body>
    <div id="app">

    </div>

    <script>
        Vue.component('s1', {
            template: '<p>前端工程师</p>'
        })
        Vue.component('s2', {
            template: '<p>Java工程师</p>'
        })
        Vue.component('s3', {
            template: '<p>软件测试工程师</p>'
        })

        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    '前端工程师',
                    'Java工程师',
                    '软件测试工程师'
                ],
                idx: ''
            },
            template: `
            <div>
                <div id="container">
                    <span v-for="(item,index) of list"
                          @click="handle(index)"
                          :class="index==idx?'active':''">
                          {{item}}
                    </span>
                </div>
                <component :is="'s'+(idx+1)"></component>
            </div>
            `,
            methods: {
                handle(index) {
                    this.idx = index;
                }
            }
        })
    </script>
</body>

</html>