笔记 vue.js循环语句小结

迈不过友情╰ 2022-06-04 06:16 225阅读 0赞

循环使用 v-for 指令。  
v-for 指令需要以 site in sites 形式的特殊语法， sites 代表源数据数组的数组名称， site 代表数组元素迭代的别名。  
v-for 可以绑定数据到数组来渲染一个列表：  
v-for 指令  
<div id="app">  
  <ol>  
    <li v-for="dd in cc">  
      \{ \{ dd.name \}\}  
    </li>  
  </ol>  
</div>  
   
<script>  
new Vue(\{  
  el: '\#app',  
  data: \{  
    cc: \[  
      \{ name: 'SS' \},  
      \{ name: 'Google' \},  
      \{ name: 'Taobao' \}  
    \]  
  \}  
\})  
</script>

运行结果：

1.  SS
2.  Google
3.  Taobao

模板中使用 v-for：  
v-for  
<ul>  
  <template v-for="site in sites">  
    <li>\{ \{ site.name \}\}</li>  
    <li>--------------</li>  
  </template>  
</ul>

使用模版运行结果：

*  SS
 *  \--------------
 *  Google
 *  \--------------
 *  Taobao
 *  \--------------

未使用模版的运行结果

*  SS
 *  Google
 *  Taobao
 *  \--------------

v-for 迭代对象  
v-for 可以通过一个对象的属性来迭代数据：  
v-for  
<div id="app">  
  <ul>  
    <li v-for="value in object">  
    \{ \{ value \}\}  
    </li>  
  </ul>  
</div>  
   
<script>  
new Vue(\{  
  el: '\#app',  
  data: \{  
    object: \{  
      name: 'SS',  
      url: 'http://www.baidu.com',  
      slogan: '飞翔！'  
    \}  
  \}  
\})  
</script>  
  
你也可以提供第二个的参数为键名：  
v-for  
<div id="app">  
  <ul>  
    <li v-for="(value,  key) in object">  
    \{ \{ key \}\} : \{ \{  value \}\}  
    </li>  
  </ul>  
</div>

运行结果：

*  name : SS
 *  url : http://www.baidu.com
 *  slogan : 飞翔！

第三个参数为索引：  
v-for  
<div id="app">  
  <ul>  
    <li v-for="(value,  key, index) in object">  
     \{ \{ index \}\}. \{ \{  key \}\} : \{ \{ value \}\}  
    </li>  
  </ul>  
</div>

运行结果：

*  0. name : SS
 *  1. url : http://www.baidu.com
 *  2. slogan : 飞翔！

v-for 迭代整数  
v-for 也可以循环整数  
v-for  
<div id="app">  
  <ul>  
    <li v-for="n in 10">  
     \{ \{ n \}\}  
    </li>  
  </ul>  
</div>

*  1
 *  2
 *  3
 *  4
 *  5

v-for 还可以 循环数组：  
<div id="app">  
<ul>  
    <li v-for="n in \[1,3,5\]">  
     \{ \{ n \}\}  
    </li>  
  </ul>  
</div>  
  
不仅如此，在迭代属性输出的之前，v-for会对属性进行 升序排序输出：