3-8Vue中的列表渲染 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的列表渲染</title> <script src="vue.js"></script> </head> <body> <div id="app">       <template v-for="(item,index) of list"> <div> {{item.text}}---{{index}} </div> <span> {{item.text}} </span> </template> <p></p> <div v-for="(item,index) of userInfo"> {{item}}----{{index}} </div> </div> <script> // push,pop,shift,unshift,sort,reverse,splice var vm = new Vue({ el: '#app', data: { // list: [ // 'hello', // 'world', // 'nice', // 'to', // 'meet', // 'you', // ] list: [ { id: '100', text: 'hello' }, { id: '101', text: 'world' }, { id: '102', text: 'nice' }, { id: '103', text: 'to' }, { id: '104', text: 'meet' }, { id: '105', text: 'you' }, ], userInfo:{ name:'youge', age:30, gender:'male', salary:'secret' } } }); </script> </body> </html> ~~~