定義并循環(huán)輸出一系列數(shù)據(jù)是前端開發(fā)中最為常見的任務(wù)之一。Vue作為現(xiàn)代化的前端框架，提供了方便易用的循環(huán)渲染功能。
VUE中通過v-for指令可以實現(xiàn)循環(huán)渲染，大多數(shù)情況下v-for用于渲染JavaScript數(shù)組，但樣式中的塊元素也可以理解為數(shù)組，循環(huán)渲染時也能夠起到不錯的作用。
<body>
<div id="app">
<div v-for="i in 3" class="box">
{{ i }}
</div>
</div>
</body>上述示例代碼中，v-for指令遍歷了一個由1至3的數(shù)字?jǐn)?shù)組，該數(shù)字即為塊元素div的渲染次數(shù)。同樣的，通過v-for指令遍歷對象的屬性也是可行的。
new Vue({
el: '#app',
data: {
items: {
a: 'A',
b: 'B',
c: 'C'
}
}
});
<body>
<div id="app">
<div v-for="(item, key) in items">
{{ key }} {{ item }}
</div>
</div>
</body>此處遍歷一個名稱為items的對象，通過v-for指令實現(xiàn)了對象屬性的讀取和輸出。
除了遍歷JavaScript數(shù)組和對象以外，VUE中提供了一個餓了么前端團隊開發(fā)的組件庫element-ui。該組件庫提供了不少便于使用的組件，并且在其中也包含了基于VUE的多選和單選選擇器組件。
下面給出一個具有多層級的element-ui基礎(chǔ)使用示例方便更好地理解和使用：
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="props"
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '設(shè)計原則',
}, {
value: 'fangan',
label: '設(shè)計方案',
}]
}]
};
},
computed: {
props() {
return {
expandTrigger: 'hover',
value: 'value',
label: 'label',
children: 'children'
};
}
}
};
</script>上述代碼中，通過el-cascader組件的v-model屬性綁定一個名為selectedOptions的數(shù)據(jù)，該組件乃一個多層級級聯(lián)選擇器，其options、props屬性則指定了級聯(lián)各選項的選項名稱，selectedOptions即返回了級聯(lián)選擇器用戶進(jìn)行的選擇結(jié)果。
總的來說，VUE循環(huán)渲染功能非常便于使用，并且在element-ui組件庫中許多拓展組件也能夠方便地使用循環(huán)渲染功能。對于那些不太懂前端框架和設(shè)計模式的同學(xué)們來說，VUE的輕松上手體驗和豐富多彩的組件庫也將成為許多同學(xué)們學(xué)習(xí)前端的首選框架。