前端笔记Vue项目day2(六）

1、 提供的静态数据
数据存放在vue 中 data 属性中
[mw_shl_code=applescript,true]var vm = new Vue({
el: '#app',
data: {
books: [{
id: 1,
name: '三国演义',
date: ''
},{
id: 2,
name: '水浒传',
date: ''
},{
id: 3,
name: '红楼梦',
date: ''
},{
id: 4,
name: '西游记',
date: ''
}]
}
}); var vm = new Vue({
el: '#app',
data: {
books: [{
id: 1,
name: '三国演义',
date: ''
},{
id: 2,
name: '水浒传',
date: ''
},{
id: 3,
name: '红楼梦',
date: ''
},{
id: 4,
name: '西游记',
date: ''
}]
}
});[/mw_shl_code]
2、 把提供好的数据渲染到页面上
利用 v-for循环 遍历 books 将每一项数据渲染到对应的数据中
[mw_shl_code=applescript,true]


{{item.id}}

{{item.name}}
{{item.date}}


修改
|
删除


[/mw_shl_code]
3、 添加图书
通过双向绑定获取到输入框中的输入内容
给按钮添加点击事件
把输入框中的数据存储到 data 中的 books 里面
[mw_shl_code=applescript,true]

图书管理

编号：




名称：




提交

[/mw_shl_code]