資訊專欄INFORMATION COLUMN
摘要：前言大家都知道只有循環，如果一層寫一個循環，顯然是無法實現未知層次的數據。
前言
大家都知道vue只有for循環，如果一層寫一個循環，顯然是無法實現未知層次的數據。
對于這個問題，官方的大神早就出了一個demo來實現遞歸，下面來剖析下它的原理
vue官方的treeview demo >>
創建一個子項的組件，這個組件內調用當前組件，實現遞歸官方閹割版代碼
HTML代碼
{{model.name}}
-
js代碼
// demo數據
var data = {
name: "My Tree",
children: [
{ name: "hello" },
{ name: "wat" },
{
name: "child folder",
children: [
{
name: "child folder",
children: [
{ name: "hello" },
{ name: "wat" }
]
},
{ name: "hello" },
{ name: "wat" },
{
name: "child folder",
children: [
{ name: "hello" },
{ name: "wat" }
]
}
]
}
]
}
// 定義子級組件
Vue.component("item", {
template: "#item-template",
props: {
model: Object
},
data: function () {
return {
}
},
methods: {
}
})
var demo = new Vue({
el: "#demo",
data: {
treeData: data
}
})
閹割版代碼 >>
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88957.html
摘要：轉換成為模板函數聯系上一篇文章，其實模板函數的構造都大同小異，基本是都是通過拼接函數字符串，然后通過對象轉換成一個函數，變成一個函數之后，只要傳入對應的數據，函數就會返回一個模板數據渲染好的字符串。 教程目錄1.手把手教你從零寫一個簡單的 VUE2.手把手教你從零寫一個簡單的 VUE--模板篇 Hello，我又回來了，上一次的文章教會了大家如何書寫一個簡單 VUE，里面實現了VUE 的...
摘要：此頁面是實現樹表格的關健頁面。這里就是關健點，因為這個子組件是需要遞歸實現，所以，需要動態注冊到當前組件中。補充一點不要只看部分，部分才是這個樹表格的關健所在。 基于vue.js實現樹形表格的封裝（vue-tree-table） 前言 由于公司產品（基于vue.js）需要，要實現一個樹形表格的功能，百度、google找了一通，并沒有發現很靠譜的，也不是很靈活。所以就用vue自己擼了一個...
摘要：本篇文章是對的源碼解析，代碼基本架構與執行流程，帶你了解打包工具的內部原理，在這之前你如果對不熟悉可以先到官網了解介紹下面是偷懶從官網抄下來的介紹極速零配置應用打包工具極速打包使用進程去啟用多核編譯。 showImg(https://segmentfault.com/img/bVbpZRp?w=1241&h=893); 本篇文章是對 Parce 的源碼解析，代碼基本架構與執行流程，帶你...
閱讀 2407·2021-10-14 09:43
閱讀 2440·2021-09-09 09:34
閱讀 1604·2019-08-30 12:57
閱讀 1207·2019-08-29 14:16
閱讀 723·2019-08-26 12:13
閱讀 3204·2019-08-26 11:45
閱讀 2288·2019-08-23 16:18
閱讀 2660·2019-08-23 15:27
