13/5-8 Recursive Component1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="vue.js"></script>
    <meta charset="UTF-8">
    <title>5-8</title>
    <style>
    body {
        font-family: Menlo, Consolas, monospace;
        color: #444;
    }

    .item {
        cursor: pointer;
    }

    .bold {
        font-weight: bold;
    }

    ul {
        padding-left: 1em;
        line-height: 1.5em;
        list-style-type: dot;
    }
    </style>
</head>

<body>
    <!-- item template -->
    <!--
    <item>
        <li>
            <div>-,+</div>
            <ul>
                <item></item>
            </ul>
        </li>
    <item>
    -->
    <script type="text/x-template" id="item-template">
        <li>
            <div
            :class="{bold: isFolder}"
            @click="toggle"
            @dblclick="changeType">
                {{model.name}}
                <span v-if="isFolder">
                    [{{open ? '-' : '+'}}]
                </span>
            </div>
            <ul v-show="open" v-if="isFolder">
                <item
                class="item"
                v-for="model in model.children"
                :model="model">
                </item>
                <li @click="addChild">
                    +
                </li>
            </ul>
        </li>
    </script>
    <p>(你可以在项目上双点击，将它成为目录)</p>
    <!-- the demo root element -->
    <ul id="demo">
        <item class="item" :model="treeData">
        </item>
    </ul>
    <script>
    // demo data
    var data = {
        name: '树',
        children: [
            {
            name: '1-1.台湾 小凡'
            },
            {
            name: '1-2.喜欢 Vue.js'
            },
            {
            name: '1-3.目录',
            children: [
            {
                name: '1-3-1.目录',
                children: [
                    {
                    name: '1-3-1-1.台湾 小凡'
                    }, {
                    name: '1-3-1-2.喜欢 Vue.js'
                    }
                ]
            }, {
                name: '1-3-2.台湾 小凡'
            }, {
                name: '1-3-3.喜欢 Vue.js'
            }, {
                name: '1-3-4目录',
                children: [
                    {
                        name: '1-3-4-1.台湾 小凡'
                    }, {
                        name: '1-3-4-2€.喜欢 Vue.js'
                }]
            }]
        }]
    }

    // define the item component
    Vue.component('item', {
        template: '#item-template',
        props: {
            model: Object
        },
        data: function() {
            return {
                open: false
            }
        },
        computed: {
            isFolder: function() {
                return this.model.children &&
                    this.model.children.length
            }
        },
        methods: {
            toggle: function() {
                if (this.isFolder) {
                    this.open = !this.open
                }
            },
            changeType: function() {
                if (!this.isFolder) {
                    Vue.set(this.model, 'children', [])
                    this.addChild()
                    this.open = true
                }
            },
            addChild: function() {
                this.model.children.push({
                    name: '新项目'
                })
            }
        }
    })

    // boot up the demo
    var demo = new Vue({
        el: '#demo',
        data: {
            treeData: data
        }
    })
    </script>
</body>

</html>