博客地址 ：https://www.cnblogs.com/sandraryan/
vue循環渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div img {
width: 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>
