for-loop - 如何在 weex 中使用 for 循环？像 for (var x = 0; x < n; x++){} 。用例是：我想渲染一个盒子 n 次

Question

给定的是用例：-我想渲染一个盒子 n 次。如何在 weex 模板中实现从 0 到 n 的 for 循环。

<template>
  <div>
    <div class="box" ></div>
    <div class="box" ></div>
    <div class="box" ></div>
    <div class="box" ></div>
    <div class="box" ></div>
    <div class="box" ></div>
    <div class="box" ></div>
    <!--n times-->
  </div>
</template>


<style scoped>
  .box {
    border-width: 2px;
    border-style: solid;
    border-color: #BBB;
    width: 250px;
    height: 250px;
    margin-top: 250px;
    margin-left: 250px;
    background-color: #EEE;
  }
</style>

Answer 1

Vue 有v-for指令：

new Vue({
  el: "#app",
  data: {
  	n: 10
  }
})

.box {
    border-width: 2px;
    border-style: solid;
    border-color: #BBB;
    width: 250px;
    height: 250px;
    margin-top: 250px;
    margin-left: 250px;
    background-color: #EEE;
  }

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div class="box" v-for="i in n" :key="i"></div>
</div>

另见 weex示例