Vue笔记——v-for用于迭代

<! 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,

},

]

}

}) ;