博客地址 :https://www.cnblogs.com/sandraryan/
vue循环渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div img { 100px; height: 100px; } </style> </head> <body> <div id="app"> <h2>循环渲染数组</h2> <span v-for="item in list">{{item}}</span> <!-- 循环创建(顺便一起创建了里面的元素)--> <div v-for='item in goodlist'> <!-- : 绑定在属性之前,不加正常属性,加上属性值会被当作代码解析--> <img :src='item.img' alt=""> <span>{{item.name}}</span> <mark>{{item.price}}</mark> </div> <hr> <h2>渲染数组并拿到下标</h2> <div v-for='(item,index) in list'> {{item}}-----{{index}} {{item}}-----{{index}} {{item}}-----{{index}} {{item}}-----{{index}} </div> <h2>循环渲染对象</h2> <hr> <div v-for='(val,key,index) in obj'> {{key}} ----{{val}}----{{index}} </div> <h2>循环 string</h2> <div v-for='item in str'>{{item}}</div> <div v-for='(item,i) in str'>{{i}}---{{item}}</div> <hr> <h3>指定循环次数</h3> <span v-for='i in 5'>{{i}}</span> <span v-for='(index,i) in 5'>{{i}}--{{index}}</span> </div> <script src="https://cdn.bootcss.com/vue/2.0.1/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { str: 'hello world', obj: { name: 'jack', age: 20, sex: 'male' }, list: ['1', '2', '3', '4'], goodlist: [{ img: 'img/1.png', name: 'girl', price: 900 }, { img: 'img/2.png', name: 'boy', price: 400 }, { img: 'img/3.png', name: "www", price: 200 }] } }); </script> </body> </html>