vue的列表渲染指令v-for

v-for​

      我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

<p v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</p>
<p v-for="(item,index) in ob_arr" :key="index">name:{{item.names}}---title:{{item.title}}---{{item.keys}}</p>

export default{
    data(){
       return{
          arr:['aa','bb','cc'],
		  ob_arr:[
				{names:'dd1',title:'ee1',keys:'ff1'},
				{names:'dd2',title:'ee2',keys:'ff2'},
				{names:'dd3',title:'ee3',keys:'ff3'},
		   ],
       }
    }
}

      对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

      你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

<div v-for="item of items"></div>

在 v-for 里使用范围值​

      v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

      注意此处 n 的初值是从 1 开始而非 0。

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/157/1058.html

很赞哦！ (0)