github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/vue-1.0.24/examples/tree/index.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3    <head>
     4      <meta charset="utf-8">
     5      <title>Vue.js tree-view demo</title>
     6      <style>
     7        body {
     8          font-family: Menlo, Consolas, monospace;
     9          color: #444;
    10        }
    11        .item {
    12          cursor: pointer;
    13        }
    14        .bold {
    15          font-weight: bold;
    16        }
    17        ul {
    18          padding-left: 1em;
    19          line-height: 1.5em;
    20          list-style-type: dot;
    21        }
    22      </style>
    23      <script src="../../dist/vue.js"></script>
    24    </head>
    25    <body>
    26  
    27      <!-- item template -->
    28      <script type="text/x-template" id="item-template">
    29        <li>
    30          <div
    31            :class="{bold: isFolder}"
    32            @click="toggle"
    33            @dblclick="changeType">
    34            {{model.name}}
    35            <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
    36          </div>
    37          <ul v-show="open" v-if="isFolder">
    38            <item
    39              class="item"
    40              v-for="model in model.children"
    41              :model="model">
    42            </item>
    43            <li @click="addChild">+</li>
    44          </ul>
    45        </li>
    46      </script>
    47  
    48      <p>(You can double click on an item to turn it into a folder.)</p>
    49  
    50      <!-- the demo root element -->
    51      <ul id="demo">
    52        <item
    53          class="item"
    54          :model="treeData">
    55        </item>
    56      </ul>
    57  
    58      <!-- demo code -->
    59      <script src="tree.js"></script>
    60    </body>
    61  </html>