vux框架 迴圈渲染flow元件
阿新 • • 發佈:2021-02-12
技術標籤:前端框架小領地
html:
<flow> <template v-for="(i, index) in steps"> <flow-state :state="index + 1" :title="i.title" :is-done="i.isDone"></flow-state> <flow-line v-if="index != (steps.length - 1)" :is-done="i.lineDone" :tip="i.tip ? i.tip : null"></flow-line> </template> </flow>
template的作用是模板佔位符,可幫助我們包裹元素,但在迴圈過程當中,template不會被渲染到頁面上
js:
<script> import { Flow, FlowState, FlowLine } from 'vux' export default { components: { Flow, FlowState, FlowLine }, data () { return { steps: [{ title: '已付款', isDone: true, lineDone: true },{ title: '待接單', isDone: true, lineDone: false tip: '進行中' },{ title: '待收貨', isDone: false, lineDone: false },{ title: '已完成', isDone: false, lineDone: false }] } } } </script>