<!
DOCTYPE html
>
<
html
lang
="
zh-cn
">
<
head
>
<
meta
charset
="
UTF-8
">
<
meta
name
="
viewport
"
content
="
width=device-width, initial-scale=1.0
">
<
meta
http-equiv
="
X-UA-Compatible
"
content
="
ie=edge
">
<
title
>v-for用于迭代
</
title
>
</
head
>
<
body
>
<
div
id
="
app
">
<
ul
>
<
li
v-for
="
food in foodList
">{{food.name}}: ¥{{food.price}}
</
li
>
</
ul
>
</
div
>
<
script
src
="
../lib/Vue.js
">
<
/
script
>
<
script
src
="
../18.2/main.js
">
<
/
script
>
</
body
>
</
html
>
JS
var app
=
new
Vue({
el
:
'
#app
',
data
: {
foodList
: [
{
name
:
'
葱
',
price
:
10,
},
{
name
:
'
姜
',
price
:
15,
},
{
name
:
'
蒜
',
price
:
8,
},
]
}
})
;