vuejs 数据绑定
数据绑定
1.vue结构 (html所有的代码需有一个根包裹起来
<div id="app">)
#html模版
<template>
<div id="app">
<h3>{{msg}}</h3>
</div>
</template>
#js业务
<script>
export default {
name: 'app',
data() {
return {
msg: 'vue demo',
}
}
}
</script>
#css样式
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>
2.数据绑定
#js业务逻辑
<script>
export default {
name: 'app',
data() {
return {
msg: 'vue demo',//返回字符
obj: { //返回对象
name: '张麻子',
age: 35,
job: '麻匪'
},
//返回数组
arr:['一筒','二筒','三筒','四筒'],
}
}
}
</script>
#html数据绑定
<template>
<div id="app">
<h3>{{msg}}</h3>
<br/>
<h3>{{obj.name}}的个人简介</h3>
<ul>
<li>姓名：{{obj.name}}</li>
<li>年龄：{{obj.age}}</li>
<li>职业：{{obj.job}}</li>
</ul>
<hr/>
<h3>{{obj.name}}的手下</h3>
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
</template>
3.复杂数组
#js数据
<script>
export default {
name: 'app',
data() {
return {
list: [
{
name: '图书馆',
category: [
{
name: '文学',
num: 2800,
},
{
name: '理学',
num: 7908,
}
]
},
{
name: '天文馆',
goods: [
{
good: '望远镜A2',
caliber: 10,
},
{
good: '望远镜L8',
caliber: 30,
},
]
},
]
}
}
}
</script>
#html数据绑定
<h3>建筑类</h3>
<ul>
<span v-for="i in list">名称：{{i.name}}
<span v-for="j in i.category">
<li>名称：{{j.name}}</li>
<li>数量：{{j.num}}</li>
</span>
<span v-for="j in i.goods">
<li>名称：{{j.good}}</li>
<li>数量：{{j.caliber}}cm</li>
</span>
</span>
</ul>
