<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> iterate </ title>
<Script the src = "../ lib / JS / vue.js "> </ Script>
</ head>
<body>
<div ID =" App ">
<-! V-cycle common for the array index i ->
<P = V-for" (Item, i) in List "> {{I}} - - - Item {} {} </ P>
<-! V-cycle for an array of objects ->
<P for V-=" (User, I) in List2 "> { }} I {- - - the user.id {{}} - - - the user.name {{}} </ P>
<- V-cycle for objects!
Note: keys for navigating the object when the body, in addition to value and has a key, and a third position in the index
->
<P for V-= "(value, key,i) in user "> Index: {{i}} - - - values: {{value}} - - - Key: Key {} {} </ P>
<- V-number of iterations for the foregoing COUNT! value starting from 1 ->
<p v-for = "count in 10"> This is the first {{count}} cycles </ P>
</ div>
<Script>
const VM = new new Vue ({
EL: '# App',
Data: {
List: [1,2,3,4,5,6,7,8,9],
List2: [
{ID:. 1, name: 'First Emperor'},
{ID: 2, name: 'Liu'},
{ id: 3, name: 'Emperor'},
{ID:. 4, name: 'Han Wen'},
{ID:. 5, name: 'Bei'}
],
User: {
ID:. 1,
name: 'Wu' ,
Gender: 'F'
}
},
Methods: {}
})
</script>
</body>
</html>
Day1.11 v-for four kinds of use
Guess you like
Origin www.cnblogs.com/zhaohui-116/p/12007301.html
Recommended
Ranking