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