17.1列表渲染之 v-for(把一个数组展示为一个列表) ---(vue入门文档学习记录)

秒速五厘米 2024-04-17 06:05 58阅读 0赞

## v-for ##

本节主要是实践把一个数组展示为一个列表.就是在多个<li>标签中展示.  
代码如下:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<script type="text/javascript" src="../vue.js" ></script>
    	<body>
    		<ul id="app-2">
    			<li v-for="item in items">
    				{
       {item.message}},
    				{
       {item.ces}}
    			</li>
    		</ul>
    	</body>
    	<script>
    		var vm = new Vue({
    			el:"#app-2",
    			data:{
    				items:[
    					{message:"111",ces:"222"},
    					{message:"122",ces:"233"},
    					{message:"133",ces:"244"}
    				]
    			}
    		})
    	</script>
    </html>

首先给’<ul>'元素定义id,通过el绑定,data则定义展示的内容,也就是数组,注意这里定义的items 就是body中 <li>标签中的v-for绑定的 item in items 中的items.  
注意v-for是绑定在<li>标签上的,id是绑定在<ul>标签上的,剩下的没什么需要注意的了.

## 使用索引 ##

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。  
例如:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<script type="text/javascript" src="../vue.js" ></script>
    	<body>
    		<ul id="app-2">
    			<li v-for="(item,index) in items">
    				{
       {item.message}},
    				{
       {item.ces}},
    				{
       {index}},
    				<ul>
    					<li v-for="item1 in parentMessage">
    						{
       {item1.message2}}
    					</li>
    				</ul>
    			</li>
    		</ul>
    	</body>
    	<script>
    		var vm = new Vue({
    			el:"#app-2",
    			data:{
    				parentMessage:[{
    					message2:"2",ces2:"2"
    				},
    				{
    					message2:"3",ces2:"3"
    				}],
    				items:[
    					{message:"111",ces:"222"},
    					{message:"122",ces:"233"},
    					{message:"133",ces:"244"}
    				]
    			}
    		})
    	</script>
    </html>

上述代码是v-for 嵌套 v-for并且第二层循环的是父作用域的数组.  
另外,你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法.