How to use for loop in weex ? like for (var x = 0; x < n; x++){} . The use case is : I want to render a box n times

Question

Given is the use case:- I want to render a box n times. How to implement for loop from 0 to n in weex template.

<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 has v-for directive:

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/[email protected]/dist/vue.js"></script>
<div id="app">
  <div class="box" v-for="i in n" :key="i"></div>
</div>

See also weex example