Vue.js: v-for 与模板文字的行为不同

Question

为什么 v-for 在使用 numbers 或 template literals 时表现不同？

这是一个例子：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <p>Result with template literal</p>
  <ul>
    <li
      v-for="pages in `${2+2}`" 
      :key="pages"
    >
      <p>{{pages}}</p>
    </li>
  </ul>
  
  <p>Result with straight number</p>
  <ul>
    <li
      v-for="pages in 4" 
      :key="pages"
    >
      <p>{{pages}}</p>
    </li>
  </ul>
  
</div>

Answer 1

它们不一样。在第一个中，您在字符串上使用 v-for。在这种情况下，vue 将循环遍历字符并将每个字符显示在 li 中。在第二个中，它是一个整数。在这种情况下，vue 将使用 range 机制

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <p>Result with template literal</p>
  <ul>
   <!--Displays 1, 0, 0-->
    <li
      v-for="pages in `100`" 
      :key="pages"
    >
      <p>{{pages}}</p>
    </li>
  </ul>
  
  <p>Result with straight number</p>
  <ul>
    <li
      v-for="pages in 4" 
      :key="pages"
    >
      <p>{{pages}}</p>
    </li>
  </ul>
  
</div>

Vue.js: v-for 与模板文字的行为不同

Vue.js: v-for behaves different with template literals

javascript

html

vue.js

template-literals