v-for use:
Code:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js v-for的使用 </title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head> <body> <div id="ask"><!--vue不能控制body和html的标签--> <table border="1"> < TR > < TH > ID </ TH > < TH > Title </ TH > < TH > Chupin </ TH > </ TR > < tbody > < TR v-for = "v in List" > <! - written as v of list effect is the same -> < TD > {} {} V.ID </ TD > < TD > {} {} V.NAME </ TD > <td> {{Title}} </ TD > </ TR > </ tbody > </ Table > < HR > < Table border = ". 1" > < TR > < TH > ID </ TH > < TH > ID </ TH > < TH > title </ TH > < TH > Chupin </ TH > </tr> <tbody> <tr v-for="(v,k) in list"><!--写成 (v,k) of list 效果是一样的--> <td>{{k}}</td> <td>{{v.id}}</td> <td>{{v.name}}</td> <td>{{title}}</td> </tr> </tbody> </table> </div> <script> var App = new new Vue ({ // Element EL: ' #ask ' , Data: { title: ' Simple record ' , List: [ {ID: . 11 , name: ' VUE learning record ' }, {ID: 22 is , name : ' VUE study notes ' } ] } }); </ Script > </ body > </ HTML >