<!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实例
el:'#jie',//element
data:{
msg:'hello vue',
num:7,
obj:{name:'劫',age:'18'},
arr:[3,9,18]
}
})
</script>
</body>
</html>
简单的vue实例 记得导入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>编号</th>
<th>名称</th>
<th>价格</th>
</tr>
<tr v-for="(value,index) in arrs">
<td>{{index+1}}</td> <!--坐标加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 指令可以绑定数组的数据
value in arr : value为变量名可自己命名，in为固定值，arr为变量（改变量应与script中data所后跟随的变量保持一致）
输出结果如下
QQ截图20180911185836.png
网友评论