vue.js樹形組件之刪除雙擊增加分支實(shí)例代碼
更新時(shí)間：2017年02月28日 14:42:31 作者：dandandegeshou
本文通過實(shí)例代碼給大家講解vue.js樹形組件之刪除雙擊增加分支功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下
html代碼：
<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>
這里使用x-template全局屬性，頁(yè)面加載不顯示，但是可供js使用
js代碼：
<script>
//加載樹形結(jié)構(gòu)初始數(shù)據(jù)，可用ajax獲取
var data = {
name: 'My Tree',
children: [
{ name: '一級(jí)' },
{ name: '一級(jí)' },
{
name: '一級(jí)有子菜單',
children: [{
name: '二級(jí)有子菜單',
children: [
{ name: '三級(jí)' },
{ name: '三級(jí)' }
]
},
{ name: '二級(jí)' },
{ name: '二級(jí)' }
]
}
]
}
Vue.component（'item', {//獲取全局組件（可用于注冊(cè)組件）
template: '#item-template',
props: {
model: Object//定義model數(shù)據(jù)格式
},
data: function（） {
return {
open: false//vue對(duì)樣式改變操作，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" >濰坊長(zhǎng)途汽車站</a></li>
var demo = new Vue（{//創(chuàng)建一個(gè)vue實(shí)例，綁定樹形數(shù)據(jù)
el: '#demo',
data: {
treeData: data
}
}）
</script>
以上所述是小編給大家介紹的vue.js樹形組件之刪除雙擊增加分支實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
如何利用vue實(shí)現(xiàn)登陸界面及其跳轉(zhuǎn)詳解
在開發(fā)中我們經(jīng)常遇到這樣的需求,需要用戶直接點(diǎn)擊一個(gè)鏈接進(jìn)入到一個(gè)頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于如何利用vue實(shí)現(xiàn)登陸界面及其跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例
下面小編就為大家分享一篇vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(上)
這篇文章主要介紹了淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(上)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
9102年webpack4搭建vue項(xiàng)目的方法步驟
這篇文章主要介紹了9102年webpack4搭建vue項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了一文詳解Vue3響應(yīng)式原理，文章通過與vue2.x?的響應(yīng)式做對(duì)比詳解展現(xiàn)出了Vue3響應(yīng)式原理詳情，感興趣的小伙伴可以參考一下2022-06-06
Vue項(xiàng)目服務(wù)器部署刷新頁(yè)面404問題及解決
這篇文章主要介紹了Vue項(xiàng)目服務(wù)器部署刷新頁(yè)面404問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在本篇文章里小編給大家整理了關(guān)于vue中英文切換實(shí)例代碼，需要的朋友們學(xué)習(xí)參考下。2020-01-01
Vue中使用Echarts響應(yīng)式布局flexible.js+rem適配方案詳解
這篇文章主要介紹了Vue中使用Echarts響應(yīng)式布局flexible.js+rem適配方案詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
在VUE中使用lodash的debounce和throttle操作
這篇文章主要介紹了在VUE中使用lodash的debounce和throttle操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
文章介紹了如何在Vue.js中獲取URL參數(shù)、定義和暴露公共方法、在main.js中引入并注冊(cè)到Vue實(shí)例原型,以及頁(yè)面中調(diào)用這些方法,作者分享了個(gè)人經(jīng)驗(yàn),希望對(duì)大家有所幫助2024-12-12