基于Vue+Element?Plus實現(xiàn)組件遞歸調(diào)用的詳細步驟
更新時間：2025年07月24日 08:32:13 作者：百錦再@新空間
在前端開發(fā)中,遞歸是一種非常強大的編程技術(shù),它允許函數(shù)或組件調(diào)用自身來解決問題,在Vue.js生態(tài)中,結(jié)合Element?Plus?UI庫,我們可以利用組件遞歸調(diào)用來構(gòu)建復(fù)雜的樹形結(jié)構(gòu),本文將深入探討Vue3與?Element?Plus中組件遞歸調(diào)用的實現(xiàn)原理、詳細步驟、最佳實踐
一、前言
在前端開發(fā)中，遞歸是一種非常強大的編程技術(shù)，它允許函數(shù)或組件調(diào)用自身來解決問題。在 Vue.js 生態(tài)中，結(jié)合 Element Plus UI 庫，我們可以利用組件遞歸調(diào)用來構(gòu)建復(fù)雜的樹形結(jié)構(gòu)、嵌套菜單、評論回復(fù)系統(tǒng)等層級數(shù)據(jù)展示界面。
本文將深入探討 Vue 3 與 Element Plus 中組件遞歸調(diào)用的實現(xiàn)原理、詳細步驟、最佳實踐以及常見問題的解決方案，幫助開發(fā)者掌握這一高級技術(shù)。
二、遞歸組件基礎(chǔ)概念
1. 什么是遞歸組件
遞歸組件是指在組件模板中直接或間接調(diào)用自身的組件。這種組件特別適合處理具有自相似性質(zhì)的數(shù)據(jù)結(jié)構(gòu)，即數(shù)據(jù)本身包含相同類型的子數(shù)據(jù)。
2. 遞歸組件的適用場景
- 樹形控件（文件目錄、組織架構(gòu)）
- 嵌套評論/回復(fù)系統(tǒng)
- 多級導(dǎo)航菜單
- 無限分類商品目錄
- 流程圖/思維導(dǎo)圖
3. Vue 中實現(xiàn)遞歸組件的必要條件
- 組件必須具有
name選項，用于在模板中引用自身 - 必須有一個明確的遞歸終止條件，防止無限循環(huán)
- 合理控制遞歸深度，避免性能問題
三、Element Plus 中的遞歸組件應(yīng)用
Element Plus 提供了許多支持遞歸結(jié)構(gòu)的組件，如 el-menu、el-tree 等。下面我們將從基礎(chǔ)實現(xiàn)開始，逐步深入。
四、基礎(chǔ)遞歸組件實現(xiàn)
1. 創(chuàng)建最簡單的遞歸組件
我們先創(chuàng)建一個簡單的遞歸組件，展示如何實現(xiàn)最基本的遞歸調(diào)用。
<template>
<div class="recursive-item">
<div @click="toggle">{{ data.name }}</div>
<div v-if="isOpen && data.children" class="children">
<RecursiveDemo
v-for="child in data.children"
:key="child.id"
:data="child"
/>
</div>
</div>
</template>
<script>
export default {
name: 'RecursiveDemo', // 必須定義name才能遞歸調(diào)用
props: {
data: {
type: Object,
required: true
}
},
data() {
return {
isOpen: true
}
},
methods: {
toggle() {
this.isOpen = !this.isOpen
}
}
}
</script>
<style>
.recursive-item {
margin-left: 20px;
cursor: pointer;
}
.children {
margin-left: 20px;
}
</style>
2. 使用遞歸組件
<template>
<div>
<h2>遞歸組件示例</h2>
<RecursiveDemo :data="treeData" />
</div>
</template>
<script>
import RecursiveDemo from './RecursiveDemo.vue'
export default {
components: {
RecursiveDemo
},
data() {
return {
treeData: {
id: 1,
name: '根節(jié)點',
children: [
{
id: 2,
name: '子節(jié)點1',
children: [
{ id: 4, name: '子節(jié)點1-1' },
{ id: 5, name: '子節(jié)點1-2' }
]
},
{
id: 3,
name: '子節(jié)點2',
children: [
{ id: 6, name: '子節(jié)點2-1' }
]
}
]
}
}
}
}
</script>
3. 實現(xiàn)原理分析
- 組件自引用：通過定義
name選項，組件可以在模板中通過該名稱引用自身 - 遞歸終止條件：當(dāng)數(shù)據(jù)沒有
children屬性或children為空數(shù)組時，遞歸自然終止 - 數(shù)據(jù)傳遞：通過 props 將子數(shù)據(jù)傳遞給遞歸實例
- 狀態(tài)管理：每個遞歸實例維護自己的展開/折疊狀態(tài)
五、結(jié)合 Element Plus 的遞歸組件
1. 使用 el-tree 實現(xiàn)遞歸結(jié)構(gòu)
Element Plus 提供了 el-tree 組件，它內(nèi)部已經(jīng)實現(xiàn)了遞歸渲染。我們先看看如何使用：
<template>
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
/>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '一級 1',
children: [
{
label: '二級 1-1',
children: [
{ label: '三級 1-1-1' }
]
}
]
},
{
label: '一級 2',
children: [
{ label: '二級 2-1' },
{ label: '二級 2-2' }
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>
2. 自定義 el-tree 節(jié)點內(nèi)容
我們可以通過插槽自定義樹節(jié)點的顯示內(nèi)容：
<template>
<el-tree :data="treeData" :props="defaultProps">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<el-button size="mini" @click="append(data)">添加</el-button>
<el-button size="mini" @click="remove(node, data)">刪除</el-button>
</span>
</span>
</template>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
// 同上
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
append(data) {
const newChild = { label: '新節(jié)點', children: [] }
if (!data.children) {
data.children = []
}
data.children.push(newChild)
},
remove(node, data) {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id)
children.splice(index, 1)
}
}
}
</script>
3. 實現(xiàn)遞歸菜單
使用 el-menu 實現(xiàn)多級嵌套菜單：
<template>
<el-menu
:default-active="activeIndex"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<template v-for="item in menuData" :key="item.id">
<menu-item :menu-item="item" />
</template>
</el-menu>
</template>
<script>
import MenuItem from './MenuItem.vue'
export default {
components: {
MenuItem
},
data() {
return {
activeIndex: '1',
menuData: [
{
id: '1',
title: '首頁',
icon: 'el-icon-location',
children: []
},
{
id: '2',
title: '系統(tǒng)管理',
icon: 'el-icon-setting',
children: [
{
id: '2-1',
title: '用戶管理',
children: [
{ id: '2-1-1', title: '添加用戶' },
{ id: '2-1-2', title: '用戶列表' }
]
},
{ id: '2-2', title: '角色管理' }
]
}
]
}
},
methods: {
handleOpen(key, keyPath) {
console.log('open', key, keyPath)
},
handleClose(key, keyPath) {
console.log('close', key, keyPath)
}
}
}
</script>
MenuItem.vue 遞歸組件：
<template>
<el-sub-menu v-if="menuItem.children && menuItem.children.length" :index="menuItem.id">
<template #title>
<i :class="menuItem.icon"></i>
<span>{{ menuItem.title }}</span>
</template>
<menu-item
v-for="child in menuItem.children"
:key="child.id"
:menu-item="child"
/>
</el-sub-menu>
<el-menu-item v-else :index="menuItem.id">
<i :class="menuItem.icon"></i>
<template #title>{{ menuItem.title }}</template>
</el-menu-item>
</template>
<script>
export default {
name: 'MenuItem',
props: {
menuItem: {
type: Object,
required: true
}
}
}
</script>
六、高級遞歸組件技巧
1. 動態(tài)加載異步數(shù)據(jù)
對于大型樹形結(jié)構(gòu)，我們可以實現(xiàn)按需加載：
<template>
<el-tree
:props="props"
:load="loadNode"
lazy
@node-click="handleNodeClick"
/>
</template>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'children',
isLeaf: 'leaf'
}
}
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
// 根節(jié)點
return resolve([
{ name: '區(qū)域1', id: 1 },
{ name: '區(qū)域2', id: 2 }
])
}
if (node.level >= 3) {
// 最多加載到3級
return resolve([])
}
// 模擬異步加載
setTimeout(() => {
const data = Array.from({ length: 3 }).map((_, i) => ({
name: `${node.data.name}-${i+1}`,
id: `${node.data.id}-${i+1}`,
leaf: node.level >= 2
}))
resolve(data)
}, 500)
},
handleNodeClick(data) {
console.log(data)
}
}
}
</script>
2. 遞歸組件與狀態(tài)管理
當(dāng)遞歸組件需要共享狀態(tài)時，可以使用 Vuex 或 Pinia：
// store/modules/tree.js
export default {
state: {
activeNode: null,
expandedKeys: []
},
mutations: {
setActiveNode(state, node) {
state.activeNode = node
},
toggleExpand(state, key) {
const index = state.expandedKeys.indexOf(key)
if (index >= 0) {
state.expandedKeys.splice(index, 1)
} else {
state.expandedKeys.push(key)
}
}
}
}
在遞歸組件中使用：
<template>
<div @click="handleClick" :class="{ active: isActive, expanded: isExpanded }">
{{ node.label }}
<div v-if="isExpanded && node.children" class="children">
<tree-node
v-for="child in node.children"
:key="child.id"
:node="child"
:depth="depth + 1"
/>
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
name: 'TreeNode',
props: {
node: Object,
depth: {
type: Number,
default: 0
}
},
computed: {
...mapState('tree', ['activeNode', 'expandedKeys']),
isActive() {
return this.activeNode && this.activeNode.id === this.node.id
},
isExpanded() {
return this.expandedKeys.includes(this.node.id)
}
},
methods: {
...mapMutations('tree', ['setActiveNode', 'toggleExpand']),
handleClick() {
this.setActiveNode(this.node)
if (this.node.children) {
this.toggleExpand(this.node.id)
}
}
}
}
</script>
3. 遞歸組件的性能優(yōu)化
遞歸組件可能導(dǎo)致性能問題，特別是在處理大型數(shù)據(jù)集時。以下是一些優(yōu)化技巧：
- 虛擬滾動：只渲染可見區(qū)域的節(jié)點
- 惰性加載：開始時只加載必要的數(shù)據(jù)，其余數(shù)據(jù)按需加載
- 記憶化：使用
v-once或計算屬性緩存靜態(tài)內(nèi)容 - 扁平化數(shù)據(jù)結(jié)構(gòu)：使用扁平化數(shù)據(jù)結(jié)構(gòu)+引用關(guān)系代替深層嵌套
虛擬滾動示例：
<template>
<el-tree-v2
:data="data"
:props="props"
:height="400"
:item-size="34"
/>
</template>
<script>
export default {
data() {
return {
data: Array.from({ length: 1000 }).map((_, i) => ({
id: i,
label: `節(jié)點 ${i}`,
children: Array.from({ length: 10 }).map((_, j) => ({
id: `${i}-${j}`,
label: `節(jié)點 ${i}-${j}`,
children: Array.from({ length: 5 }).map((_, k) => ({
id: `${i}-${j}-${k}`,
label: `節(jié)點 ${i}-${j}-${k}`
}))
}))
})),
props: {
label: 'label',
children: 'children'
}
}
}
}
</script>
七、遞歸組件的常見問題與解決方案
1. 無限遞歸問題
問題描述：組件無限調(diào)用自身導(dǎo)致棧溢出
解決方案：
- 確保有明確的終止條件
- 檢查數(shù)據(jù)結(jié)構(gòu)是否正確，避免循環(huán)引用
- 限制最大遞歸深度
<script>
export default {
props: {
data: Object,
depth: {
type: Number,
default: 0
}
},
computed: {
shouldStop() {
// 終止條件1：沒有子節(jié)點
// 終止條件2：達到最大深度
return !this.data.children || this.data.children.length === 0 || this.depth >= 10
}
}
}
</script>
2. 組件狀態(tài)管理混亂
問題描述：遞歸組件中多個實例共享狀態(tài)導(dǎo)致混亂
解決方案：
- 每個遞歸實例維護自己的局部狀態(tài)
- 使用作用域插槽隔離狀態(tài)
- 對于共享狀態(tài)，使用唯一標(biāo)識區(qū)分不同實例
3. 性能問題
問題描述：深層遞歸導(dǎo)致渲染性能下降
解決方案：
- 實現(xiàn)虛擬滾動
- 使用惰性加載
- 扁平化數(shù)據(jù)結(jié)構(gòu)
- 使用
v-memo(Vue 3.2+) 優(yōu)化靜態(tài)內(nèi)容
4. 事件冒泡問題
問題描述：遞歸組件中事件冒泡導(dǎo)致意外行為
解決方案：
- 使用
.stop修飾符阻止事件冒泡 - 在事件處理函數(shù)中檢查事件目標(biāo)
- 使用自定義事件代替原生 DOM 事件
<template>
<div @click.stop="handleClick">
<!-- 內(nèi)容 -->
</div>
</template>
八、遞歸組件的測試策略
1. 單元測試遞歸組件
import { mount } from '@vue/test-utils'
import RecursiveComponent from '@/components/RecursiveComponent.vue'
describe('RecursiveComponent', () => {
it('渲染基本結(jié)構(gòu)', () => {
const wrapper = mount(RecursiveComponent, {
props: {
data: {
id: 1,
name: '測試節(jié)點'
}
}
})
expect(wrapper.text()).toContain('測試節(jié)點')
})
it('遞歸渲染子節(jié)點', () => {
const wrapper = mount(RecursiveComponent, {
props: {
data: {
id: 1,
name: '父節(jié)點',
children: [
{ id: 2, name: '子節(jié)點1' },
{ id: 3, name: '子節(jié)點2' }
]
}
}
})
expect(wrapper.text()).toContain('父節(jié)點')
expect(wrapper.text()).toContain('子節(jié)點1')
expect(wrapper.text()).toContain('子節(jié)點2')
})
it('點擊觸發(fā)事件', async () => {
const wrapper = mount(RecursiveComponent, {
props: {
data: {
id: 1,
name: '可點擊節(jié)點'
}
}
})
await wrapper.find('.node').trigger('click')
expect(wrapper.emitted()).toHaveProperty('node-click')
})
})
2. 測試遞歸終止條件
it('在沒有子節(jié)點時停止遞歸', () => {
const wrapper = mount(RecursiveComponent, {
props: {
data: {
id: 1,
name: '葉節(jié)點'
}
}
})
expect(wrapper.findAllComponents(RecursiveComponent)).toHaveLength(1)
})
it('在達到最大深度時停止遞歸', () => {
const wrapper = mount(RecursiveComponent, {
props: {
data: {
id: 1,
name: '根節(jié)點',
children: [
{
id: 2,
name: '子節(jié)點',
children: [
{ id: 3, name: '孫節(jié)點' }
]
}
]
},
maxDepth: 1
}
})
// 根節(jié)點 + 子節(jié)點，孫節(jié)點不應(yīng)渲染
expect(wrapper.findAllComponents(RecursiveComponent)).toHaveLength(2)
})
九、遞歸組件的實際應(yīng)用案例
1. 文件資源管理器
<template>
<div class="file-explorer">
<file-node
v-for="node in fileTree"
:key="node.id"
:node="node"
@select="handleSelect"
/>
</div>
</template>
<script>
import FileNode from './FileNode.vue'
export default {
components: {
FileNode
},
data() {
return {
fileTree: [
{
id: 'folder1',
name: '文檔',
type: 'folder',
children: [
{ id: 'file1', name: '報告.docx', type: 'file' },
{ id: 'file2', name: '簡歷.pdf', type: 'file' }
]
},
{
id: 'folder2',
name: '圖片',
type: 'folder',
children: [
{
id: 'folder2-1',
name: '旅行',
type: 'folder',
children: [
{ id: 'file3', name: '巴黎.jpg', type: 'file' }
]
}
]
}
],
selectedFile: null
}
},
methods: {
handleSelect(file) {
this.selectedFile = file
console.log('選中文件:', file)
}
}
}
</script>
FileNode.vue:
<template>
<div class="file-node">
<div
class="node-content"
:class="{ selected: isSelected }"
@click="handleClick"
>
<el-icon :size="16">
<component :is="node.type === 'folder' ? 'Folder' : 'Document'" />
</el-icon>
<span class="name">{{ node.name }}</span>
<el-icon v-if="node.type === 'folder'" :size="12" class="arrow">
<ArrowRight v-if="!isExpanded" />
<ArrowDown v-else />
</el-icon>
</div>
<div v-if="isExpanded && node.children" class="children">
<file-node
v-for="child in node.children"
:key="child.id"
:node="child"
@select="$emit('select', $event)"
/>
</div>
</div>
</template>
<script>
import { Folder, Document, ArrowRight, ArrowDown } from '@element-plus/icons-vue'
export default {
name: 'FileNode',
components: {
Folder, Document, ArrowRight, ArrowDown
},
props: {
node: {
type: Object,
required: true
}
},
data() {
return {
isExpanded: false
}
},
computed: {
isSelected() {
return this.$parent.selectedFile?.id === this.node.id
}
},
methods: {
handleClick() {
if (this.node.type === 'folder') {
this.isExpanded = !this.isExpanded
} else {
this.$emit('select', this.node)
}
}
}
}
</script>
2. 嵌套評論系統(tǒng)
<template>
<div class="comment-system">
<h3>評論</h3>
<div class="comment-list">
<comment-item
v-for="comment in comments"
:key="comment.id"
:comment="comment"
@reply="handleReply"
/>
</div>
<div class="comment-form">
<el-input
v-model="newComment"
type="textarea"
:rows="3"
placeholder="發(fā)表你的評論..."
/>
<el-button type="primary" @click="submitComment">提交</el-button>
</div>
</div>
</template>
<script>
import CommentItem from './CommentItem.vue'
export default {
components: {
CommentItem
},
data() {
return {
newComment: '',
replyingTo: null,
comments: [
{
id: 1,
author: '用戶1',
content: '這是一條主評論',
createdAt: '2023-01-01',
replies: [
{
id: 3,
author: '用戶2',
content: '這是一條回復(fù)',
createdAt: '2023-01-02',
replies: [
{
id: 4,
author: '用戶1',
content: '這是對回復(fù)的回復(fù)',
createdAt: '2023-01-03',
replies: []
}
]
}
]
},
{
id: 2,
author: '用戶3',
content: '另一條主評論',
createdAt: '2023-01-01',
replies: []
}
]
}
},
methods: {
handleReply(comment) {
this.replyingTo = comment
this.newComment = `@${comment.author} `
},
submitComment() {
if (!this.newComment.trim()) return
const newComment = {
id: Date.now(),
author: '當(dāng)前用戶',
content: this.newComment,
createdAt: new Date().toISOString().split('T')[0],
replies: []
}
if (this.replyingTo) {
this.replyingTo.replies.push(newComment)
} else {
this.comments.push(newComment)
}
this.newComment = ''
this.replyingTo = null
}
}
}
</script>
CommentItem.vue:
<template>
<div class="comment-item">
<div class="comment-header">
<span class="author">{{ comment.author }}</span>
<span class="date">{{ comment.createdAt }}</span>
</div>
<div class="comment-content">{{ comment.content }}</div>
<div class="comment-actions">
<el-button size="small" @click="$emit('reply', comment)">回復(fù)</el-button>
</div>
<div v-if="comment.replies.length" class="replies">
<comment-item
v-for="reply in comment.replies"
:key="reply.id"
:comment="reply"
@reply="$emit('reply', $event)"
/>
</div>
</div>
</template>
<script>
export default {
name: 'CommentItem',
props: {
comment: {
type: Object,
required: true
}
}
}
</script>
十、總結(jié)與最佳實踐
1. 遞歸組件設(shè)計原則
- 明確終止條件：確保遞歸有明確的結(jié)束條件，防止無限循環(huán)
- 控制遞歸深度：對于可能很深的遞歸，設(shè)置最大深度限制
- 性能優(yōu)化：對于大型數(shù)據(jù)結(jié)構(gòu)，考慮虛擬滾動或分頁加載
- 狀態(tài)隔離：確保每個遞歸實例有獨立的狀態(tài)管理
- 唯一鍵值：為每個遞歸項提供唯一的
key，提高渲染效率
2. 性能優(yōu)化建議
- 使用虛擬滾動：對于大型列表，使用
el-tree-v2或第三方虛擬滾動組件 - 惰性加載：只在需要時加載子節(jié)點數(shù)據(jù)
- 記憶化：使用
v-memo或計算屬性緩存不常變化的內(nèi)容 - 扁平化數(shù)據(jù)結(jié)構(gòu)：使用 ID 引用代替深層嵌套，減少響應(yīng)式開銷
- 避免不必要的響應(yīng)式：對于不會變化的數(shù)據(jù)，使用
Object.freeze
3. 可維護性建議
- 清晰命名：遞歸組件和相關(guān)變量應(yīng)具有描述性名稱
- 文檔注釋：為遞歸組件和關(guān)鍵方法添加詳細注釋
- 類型定義：使用 TypeScript 定義遞歸數(shù)據(jù)結(jié)構(gòu)
- 單元測試：為遞歸組件編寫全面的測試用例
- 限制復(fù)雜度：如果遞歸邏輯過于復(fù)雜，考慮重構(gòu)為非遞歸實現(xiàn)
4. 何時不使用遞歸組件
雖然遞歸組件很強大，但并非所有場景都適用：
- 數(shù)據(jù)層級非常深：可能導(dǎo)致堆棧溢出或性能問題
- 需要復(fù)雜的狀態(tài)共享：可能使?fàn)顟B(tài)管理變得困難
- 需要頻繁更新：深層響應(yīng)式數(shù)據(jù)可能帶來性能問題
- 結(jié)構(gòu)不規(guī)則：非自相似數(shù)據(jù)結(jié)構(gòu)不適合遞歸
在這些情況下，可以考慮使用扁平化數(shù)據(jù)結(jié)構(gòu)+引用關(guān)系，或者使用迭代算法代替遞歸。
以上就是基于Vue+Element Plus實現(xiàn)組件遞歸調(diào)用的詳細步驟的詳細內(nèi)容，更多關(guān)于Vue Element Plus組件遞歸調(diào)用的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
VUE訪問接口的時候,很可能出現(xiàn)跨域請求,從而被提供接口的服務(wù)器拒絕,下面這篇文章主要給大家介紹了關(guān)于Vue如何解決跨域問題的相關(guān)資料,需要的朋友可以參考下2022-02-02
本文主要介紹了Vue前端頁面版本檢測解決方案,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-02-02
這篇文章主要為大家介紹了vue2實現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標(biāo)滑動展示tab欄切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇VUE單頁面切換動畫代碼(全網(wǎng)最好的切換效果)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
在elementui中Notification組件添加點擊事件實例
這篇文章主要介紹了在elementui中Notification組件添加點擊事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
過濾器是vue為開發(fā)者提供的功能，常用于文本的格式化，過濾器應(yīng)該被添加在JavaScrip表達式的尾部，由“管道符”進行調(diào)用，這篇文章通過案例給大家講解Vue過濾器介紹及使用方法，需要的朋友參考下吧2022-11-11
這篇文章主要介紹了vue使用計算屬性完成動態(tài)滑竿條制作，文章圍繞計vue算屬制作動態(tài)滑竿條的相關(guān)代碼完成內(nèi)容,需要的朋友可以參考一下2021-12-12
這篇文章主要介紹了setTimeout在vue中的正確使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vuex存儲數(shù)組(新建，增，刪，更新)并存入localstorage定時刪除功能實現(xiàn)
這篇文章主要介紹了vuex存儲數(shù)組(新建，增，刪，更新)，并存入localstorage定時刪除,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04