博客地址 ：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>
