2018-09-11 vue 第一节
2018-09-11 本文已影响0人
夏末樱花落
一、认识vue
<div id="app">
{{num}}
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
new Vue({ //vue实例
el : "#app", //element + 选择器
data : { //data用于存放数据
num : "默认值"
}
})
</script>
<!--data用于存放数据-->
二、 vue的指令
---------------- v-for 循环操
<div id="app-1">
<ul>
<li v-for="v in arr">{{v}}</li>
<li v-for="s in obj">{{s}}</li>
<li v-for="(val,ind) in arr">
<!--v-for="(值，下标) in 名"-->
{{val}}-----{{ind}}
<!--中间-----为连接符，符号可随意改变-->
</li>
<li v-for="(va,i) in arrs">
{{va.num}}
{{va.name}}
{{va.price}}
</li>
</ul>
</div>
<script>
new Vue({
el : "#app-1",
data : {
arr : [1,2,3],
obj : {name :'obj',age:12},
arrs :[
{
num:1,
name:"a",
price:3
},
{
num:2,
name:"b",
price:2
}
]
}
})
</script>
三、表格
<div id="app">
<table border=1 cellspacing="0" text-align="center" width="300">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for='(val,index) in arrs'>
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.price}}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el : "#app",
data : {
arrs :[
{
name:"a",
price:3
},
{
name:"b",
price:2
}
]
}
})
</script>
