<script type="text/x-template" id="item-template"><li><div :class="{bold: isFolder}" @click="toggle">{{model.name}}<span v-if="isFolder">[{{open ? '-' : '+'}}]</span></div><!--v-show控制當(dāng)前元素的display屬性，根據(jù)v-show里面的值來判斷，true顯示，false不顯示--><ul v-show="open" v-if="isFolder"><!--model用于雙向綁定數(shù)據(jù)--><item class="item" v-for="model in model.children" :model="model"></item></ul></li></script><ul id="demo"><item class="item" :model="treeData"></item></ul>

<script>//加載樹形結(jié)構(gòu)初始數(shù)據(jù)，可用ajax獲取var data = {name: 'My Tree',children: [{ name: '一級' },{ name: '一級' },{name: '一級有子菜單',children: [{name: '二級有子菜單',children: [{ name: '三級' },{ name: '三級' }]},{ name: '二級' },{ name: '二級' }]}]}Vue.component（'item', {//獲取全局組件（可用于注冊組件）template: '#item-template',props: {model: Object//定義model數(shù)據(jù)格式},data: function（） {return {open: false//vue對樣式改變操作，true顯示 false不顯示}},computed: {//讀取寫入函數(shù)，不寫get,set則為只讀isFolder: function（） {return this.model.children}},methods: {toggle: function（） {if（this.isFolder） {this.open = !this.open//打開樹形結(jié)構(gòu)}}}}）<li><a  rel="external nofollow" >濰坊長途汽車站</a></li>var demo = new Vue（{//創(chuàng)建一個vue實(shí)例，綁定樹形數(shù)據(jù)el: '#demo',data: {treeData: data}}）</script>