demo.html
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml" 3 xmlns:v-on="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Vue Demo</title> 7 <!--自选版本--> 8 <!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>--> 9 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 10 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11 <!-- 生产环境版本，优化了尺寸和速度 --> 12 <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>--> 13 </head> 14 <body> 15 <div id="app"> 16 <div> 17 <h2>v-for举例说明</h2> 18 <div> 19 <!--数组下标--> 20 <!--{{names[0]}}--> 21 22 <!--数组遍历--> 23 <div> 24 <h3>数组遍历</h3> 25 <ul> 26 <li v-for="name in names"> 27 {{name}} 28 </li> 29 </ul> 30 </div> 31 <hr> 32 <!--对象数组遍历--> 33 <div> 34 <h3>对象数组遍历</h3> 35 <ul> 36 <li v-for="user,index in users"> 37 {{index+1}}.{{user.name}} - {{user.age}} 38 </li> 39 </ul> 40 </div> 41 <hr> 42 <div> 43 <h3>对象数组遍历(template)</h3> 44 <template v-for="user,index in users"> 45 <p> 46 <span>{{user.name}}</span> - 47 <span>{{user.age}}</span> 48 </p> 49 </template> 50 </div> 51 <hr> 52 <div> 53 <h3>对象数组遍历(key-value)</h3> 54 <div v-for="user,index in users"> 55 {{index+1}}. 56 <span v-for="value,key in user"> 57 {{key}} : {{value}} 、 58 </span> 59 </div> 60 </div> 61 </div> 62 </div> 63 </div> 64 <script src="app.js"></script> 65 </body> 66 </html>
app.js
var app = new Vue({ el: '#app', data: { names:["Tom","Lily","Mark"], users:[ {"name":"Tom","age":"26"}, {"name":"Lily","age":"31"}, {"name":"Mark","age":"18"} ] }, methods: {}, computed: {} })
截图：
