<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="jie">
{{msg}}
{{num}}
{{obj}}
{{arr}}
</div>
<script>
new Vue({//vue實(shí)例
el:'#jie',//element
data:{
msg:'hello vue',
num:7,
obj:{name:'劫',age:'18'},
arr:[3,9,18]
}
})
</script>
</body>
</html>
簡(jiǎn)單的vue實(shí)例 記得導(dǎo)入vue.js
輸出如下
QQ截圖20180911185711.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<script src="js/vue.js"></script>
<div id="jie">
<ul>
<!--<li v-for="v in arr">{{v}}</li>-->
<!--<li v-for="val in obj">{{val}}</li>-->
<!--<li v-for="(val,ind) in arr">{{ind}}<{{val}}</li>-->
<!--<li v-for="(val,ind) in obj">{{ind}}<{{val}}</li>-->
<table border=1 cellspacing="0">
<!--cellspacing 間距-->
<tr>
<th>編號(hào)</th>
<th>名稱</th>
<th>價(jià)格</th>
</tr>
<tr v-for="(value,index) in arrs">
<td>{{index+1}}</td> <!--坐標(biāo)加1-->
<!--<td>{{value.num}}</td>-->
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
</table>
</ul>
</div>
<script>
new Vue({
el:'#jie',
data:{
// arr:[1,2,3],
// obj:{name:'jie',age:'18'}
arrs:[
{num:1,name:'apple',price:3},
{num:2,name:'banana',price:5},
{num:3,name:'orange',price:4}
]
}
})
</script>
</body>
</html>
v-for 指令可以綁定數(shù)組的數(shù)據(jù)
value in arr : value為變量名可自己命名，in為固定值，arr為變量（改變量應(yīng)與script中data所后跟隨的變量保持一致）
輸出結(jié)果如下
QQ截圖20180911185836.png
