第一节课我们讲的是Vue
首先先下载上vue的链接，在链接到script的里边，如下所示：
<script src="dist/vue.js"></script>
接下来是开始在script里编辑代码
<div id="itany">
{{msg}}//带上两个花括号，获取下边msg的内容
<ul>
<li v-for="(val.index) in arr">{{index}}-{{val}}</li>v-for是调用循环下边script里边的内容,index是代表对应的内容
</ul>
</div>
<script>
new Vue({
el:'#itany',//这个是对应div的id的名字
data:{//数据，在data里输入内容
msg:'hello',
arr:[1,2,3,4],
obj:{name:"saisai",age:20},
arrs:[
{name:"xiaohong",form:"不在人世",age:"30000岁"},
{name:"xiaolv",form:"不在人世",age:"104500岁"},
{name:"xiaozi",form:"不在人世",age:"20000岁"}
]
}
})
</script>
//这些代码跟上面div里边的内容是对应的，不信你看上边div的id
接下来是运用vue写一个表格
<body>
<div id='itany'>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>来自</th>
<th>多大</th>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in arrs">
<td>{{index+1}}</td>
<td>{{val.form}}</td>
<td>{{val.age}}</td>
</tr>
</tbody>
</table>
</div>
<script src="dist/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello',
arr:[1,2,3,4],
obj:{name:"saisai",age:20},
arrs:[
{name:"xiaohong",form:"不在人世",age:"30000岁"},
{name:"xiaolv",form:"不在人世",age:"104500岁"},
{name:"xiaozi",form:"不在人世",age:"20000岁"}
]
}
})
</script>
</body>
网友评论