-
-
vue中v-for的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for遍历数组</title>
<script type="text/javascript" src="js/Vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item) in arr">{{item}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
arr:[1,2,3,4,5]
}
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for遍历对象</title>
<script type="text/javascript" src="js/Vue.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="(product,index) in products">
<td>{{index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
products:[
{
id:1,
name:"笔记本电脑",
price:5000
},
{
id:2,
name:"智能手机",
price:4000
},
{
id:3,
name:"小米电视",
price:5899
},
]
}
});
</script>
</html>
-
vue中v-model的使用(可以从json格式数据中取值)
-