Vue 基础
2018-09-11 本文已影响0人
北觅_Sir
Vue 起步
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>"
//链接 进去
<body>
<div id="box">
{{mate}}
</div>
<script>
new Vue({//Vue 实例
el:'#box',// 选择器
data:{
//mate:"这是什么"，
//mate:188
//mate:[1,2,3]
mate:{name:"张先生",old:19}
}
)
</script>
</body>
Vue V-for循环 （一）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=""https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<!--v-for 循环-->
<li v-for="v in arr">
<p v-for="val in obj">{{val}}</p>
</li>
<!--v-for 下标 循环-->
<li v-for="(i,v) in arr">
{{v}}---{{i}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#box',
data:{
arr:[1,2,3],
obj:{name:'jake',old:18 }
}
}
)
</script>
</body>
</html>
Vue V-for 循环（二)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=""https://cdn.bootcss.com/vue/2.5.16/vue.min.js">
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="v in arr">
{{v.name}}
{{v.old}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#box',
data:{
arr:[{name:'1',old:18},{name:'2',old:19},{name:'3',old:20}]
}
})
</script>
</body>
</html>
Vue v-for表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src=""https://cdn.bootcss.com/vue/2.5.16/vue.min.js""></script>
</head>
<body>
<div id="box">
<table border="" cellspacing="" cellpadding=""><tr v-for="v in arr">
<td>{{v.friut}}</td>
<td>{{v.name}}</td>
<td>{{v.many}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
arr:[{friut:"编号",name:"水果",many:"价格"},{friut:"1",name:"apple",many:"3"},{friut:"2",name:"banana",many:"4"},{friut:"3",name:"orange",many:"5"}]
}
})
</script>
</body>
</html>
