当前位置：网站首页>2.4 circular statements

2.4 circular statements

2022-07-21 16:05:00 【Qwe7】

2.4 Loop statement

Vue The circular keyword in does not Java So many , Only v-for, But there are many uses . Next, let's introduce .

We need to define the data source , And then through v-for To traverse the data source , Then use the difference expression to output data .

a. Normal cycle

<body>
<div id="app">
    <ul>
        <li v-for="a in args">{{a}}</li>
    </ul>
</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });
</script>

b. With an index for

<body>
<div id="app">
    <ul>
        <li v-for=" (a,i)  in  args" :key='i'>{{i}}{{a}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });
</script>

c. Traversing objects

<body>
<div id="app">
    <ul>
        <li v-for="(v,k,i) in student">{{i+1}}--{{k}}--{{v}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
    	el:'#app',
    	data:{
       	 	student:{
            	username:' Little fish ',
				age:20,
				girl:' Flowery '
        	}
    	}
	});
</script>

v、k、i You can define these characters yourself , Respectively represent the value of each cycle content 、 key 、 Serial number .

- v: The value of each data in the loop Little fish 、20、 Flowery

- k: The key of daily data in the loop username、age、girl

- i: The serial number of the loop , from 0 Start

d. Traversing an array of objects

<body>
<div id="app">
    <ul>
        <li v-for=" student in students">
        	<span v-for="(v,k,i) in student">{{i+1}}--{{k}}--{{v}}</span>
    	</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
    	el:'#app',
    	data:{
       	 	students:[
            	{
                	name:'xiaoming',
                	age:20
            	},
            	{
                	name:'xiaowang',
                	age:21
            	}
        	]
    	}
	});
</script>

You can see it clearly , At this point, the data source is a student Array , Through two layers v-for loop , The outer layer traverses each... In the array student object , Inner layer v-for Iterate through the of each object v、k、i.

The page effect is as follows ：

原网站

版权声明
本文为[Qwe7]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/202/202207202059160812.html

当前位置：网站首页>2.4 circular statements

2.4 circular statements

2.4 Loop statement

边栏推荐

猜你喜欢

随机推荐