Vue: 图书列表案例
2024-05-21 15:13:29
图书列表案例
- 静态列表效果
- 基于数据实现模板效果
- 处理每行的操作按钮
1、 提供的静态数据
- 数据存放在vue 中 data 属性中
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: ''}]}});
2、 把提供好的数据渲染到页面上
- 利用 v-for循环 遍历 books 将每一项数据渲染到对应的数据中
<tbody><tr :key='item.id' v-for='item in books'><!-- 对应的id 渲染到页面上 --><td>{{item.id}}</td><!-- 对应的name 渲染到页面上 --><td>{{item.name}}</td><td>{{item.date}}</td><td><!-- 阻止 a 标签的默认跳转 --><a href="" @click.prevent>修改</a><span>|</span><a href="" @click.prevent>删除</a></td></tr>
</tbody>
3、 添加图书
- 通过双向绑定获取到输入框中的输入内容
- 给按钮添加点击事件
- 把输入框中的数据存储到 data 中的 books 里面
<div><h1>图书管理</h1><div class="book"><div><label for="id">编号：</label><!-- 3.1、通过双向绑定获取到输入框中的输入的 id --><input type="text" id="id" v-model='id'><label for="name">名称：</label><!-- 3.2、通过双向绑定获取到输入框中的输入的 name --><input type="text" id="name" v-model='name'><!-- 3.3、给按钮添加点击事件 --><button @click='handle'>提交</button></div></div>
</div><script type="text/javascript">/*图书管理-添加图书*/var vm = new Vue({el: '#app',data: {id: '',name: '',books: [{id: 1,name: '三国演义',date: ''},{id: 2,name: '水浒传',date: ''},{id: 3,name: '红楼梦',date: ''},{id: 4,name: '西游记',date: ''}]},methods: {handle: function(){// 3.4 定义一个新的对象book 存储 获取到输入框中 书 的id和名字 var book = {};book.id = this.id;book.name = this.name;book.date = '';// 3.5 把book 通过数组的变异方法 push 放到 books 里面this.books.push(book);//3.6 清空输入框this.id = '';this.name = '';}}});</script>
4 修改图书-上
- 点击修改按钮的时候 获取到要修改的书籍名单
- 4.1 给修改按钮添加点击事件， 需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍
- 把需要修改的书籍名单填充到表单里面
- 4.2 根据传递过来的id 查出books 中 对应书籍的详细信息
- 4.3 把获取到的信息填充到表单
<div id="app"><div class="grid"><div><h1>图书管理</h1><div class="book"><div><label for="id">编号：</label><input type="text" id="id" v-model='id' :disabled="flag"><label for="name">名称：</label><input type="text" id="name" v-model='name'><button @click='handle'>提交</button></div></div></div><table><thead><tr><th>编号</th><th>名称</th><th>时间</th><th>操作</th></tr></thead><tbody><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td><!--- 4.1 给修改按钮添加点击事件， 需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍---> <a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><a href="" @click.prevent>删除</a></td></tr></tbody></table></div></div><script type="text/javascript">/*图书管理-添加图书*/var vm = new Vue({el: '#app',data: {flag: false,id: '',name: '',books: [{id: 1,name: '三国演义',date: ''},{id: 2,name: '水浒传',date: ''},{id: 3,name: '红楼梦',date: ''},{id: 4,name: '西游记',date: ''}]},methods: {handle: function(){// 3.4 定义一个新的对象book 存储 获取到输入框中 书 的id和名字 var book = {};book.id = this.id;book.name = this.name;book.date = '';// 3.5 把book 通过数组的变异方法 push 放到 books 里面this.books.push(book);//3.6 清空输入框this.id = '';this.name = '';},toEdit: function(id){console.log(id)//4.2 根据传递过来的id 查出books 中 对应书籍的详细信息var book = this.books.filter(function(item){return item.id == id;});console.log(book)//4.3 把获取到的信息填充到表单// this.id 和 this.name 通过双向绑定 绑定到了表单中 一旦数据改变视图自动更新this.id = book[0].id;this.name = book[0].name;}}});</script>
5 修改图书-下
- 5.1 定义一个标识符， 主要是控制 编辑状态下当前编辑书籍的id 不能被修改 即 处于编辑状态下 当前控制书籍编号的输入框禁用
- 5.2 通过属性绑定给书籍编号的 绑定 disabled 的属性 flag 为 true 即为禁用
- 5.3 flag 默认值为false 处于编辑状态 要把 flag 改为true 即当前表单为禁用
- 5.4 复用添加方法 用户点击提交的时候依然执行 handle 中的逻辑如果 flag为true 即 表单处于不可输入状态 此时执行的用户编辑数据数据
<div id="app"><div class="grid"><div><h1>图书管理</h1><div class="book"><div><label for="id">编号：</label><!-- 5.2 通过属性绑定 绑定 disabled 的属性 flag 为 true 即为禁用 --><input type="text" id="id" v-model='id' :disabled="flag"><label for="name">名称：</label><input type="text" id="name" v-model='name'><button @click='handle'>提交</button></div></div></div><table><thead><tr><th>编号</th><th>名称</th><th>时间</th><th>操作</th></tr></thead><tbody><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td><a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><a href="" @click.prevent>删除</a></td></tr></tbody></table></div></div>
<script type="text/javascript">/*图书管理-添加图书*/var vm = new Vue({el: '#app',data: {// 5.1 定义一个标识符， 主要是控制 编辑状态下当前编辑书籍的id 不能被修改 // 即 处于编辑状态下 当前控制书籍编号的输入框禁用 flag: false,id: '',name: '',},methods: {handle: function() {/*5.4 复用添加方法 用户点击提交的时候依然执行 handle 中的逻辑如果 flag为true 即 表单处于不可输入状态 此时执行的用户编辑数据数据 */ if (this.flag) {// 编辑图书// 5.5 根据当前的ID去更新数组中对应的数据 this.books.some((item) => {if (item.id == this.id) {// 箭头函数中 this 指向父级作用域的this item.name = this.name;// 完成更新操作之后，需要终止循环return true;}});// 5.6 编辑完数据后表单要处以可以输入的状态this.flag = false;// 5.7 如果 flag为false 表单处于输入状态 此时执行的用户添加数据 } else { var book = {};book.id = this.id;book.name = this.name;book.date = '';this.books.push(book);// 清空表单this.id = '';this.name = '';}// 清空表单this.id = '';this.name = '';},toEdit: function(id) {/*5.3 flag 默认值为false 处于编辑状态 要把 flag 改为true 即当前表单为禁 用 */ this.flag = true;console.log(id)var book = this.books.filter(function(item) {return item.id == id;});console.log(book)this.id = book[0].id;this.name = book[0].name;}}});</script>
6 删除图书
- 6.1 给删除按钮添加事件 把当前需要删除的书籍id 传递过来
- 6.2 根据id从数组中查找元素的索引
- 6.3 根据索引删除数组元素
<tbody><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td><a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><!-- 6.1 给删除按钮添加事件 把当前需要删除的书籍id 传递过来 --> <a href="" @click.prevent='deleteBook(item.id)'>删除</a></td></tr>
</tbody><script type="text/javascript">/*图书管理-添加图书*/var vm = new Vue({methods: {deleteBook: function(id){// 删除图书#// 6.2 根据id从数组中查找元素的索引// var index = this.books.findIndex(function(item){// return item.id == id;// });#// 6.3 根据索引删除数组元素// this.books.splice(index, 1);// -------------------------#// 方法二：通过filter方法进行删除# 6.4 根据filter 方法 过滤出来id 不是要删除书籍的id # 因为 filter 是替换数组不会修改原始数据 所以需要 把 不是要删除书籍的id 赋值给 books this.books = this.books.filter(function(item){return item.id != id;});}}});</script>
Vue: 图书列表案例相关推荐
- 【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性 表单基本操作 表单修饰符 自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令 带参数 自定义指令局部指令 计算属性 c ...
- VUE:学生列表案例——内部指令v-for与v-on简单应用
#本案例需要熟悉v-for与v-on这两个vue内部指令,下面通过两个简单的案例,带领大家迅速熟悉一下这两个常用的内部指令 v-for指令:主要用于列表的渲染与循环数组 简单案例: 关键代码部分: & ...
- Vue 图书管理案例
这篇文章主要为大家详细介绍了vue.js实现图书管理功能,具有一定的参考价值, 感兴趣的小伙伴们可以参考一下 <!DOCTYPE html> <html lang="en& ...
- Vue小案例——图书列表
图书列表 案例显示 HTML 结构 CSS 样式 提供的静态数据 把提供好的数据渲染到页面上 对页面进行事件绑定 逻辑层次的JS代码 案例显示 图书列表 实现静态列表效果 基于数据实现模板效果 处里每 ...
- Vue 实现 图书管理 案例
案例效果 案例思路 图书列表 实现静态列表效果 基于数据实现模板效果 处理每行的操作按钮 添加图书 实现表单的静态效果 添加图书表单域数据绑定 添加按钮事件绑定 实现添加业务逻辑 修改图书 修改信息填 ...
- 案例：图书管理（包括图书列表展示，添加、修改、删除图书功能）
案例:图书管理 功能如下: (1)图书列表 实现静态列表效果 基于数据实现模板效果 处理每行的操作按钮 (2)添加图书 实现表单的静态效果 添加图书表单域数据绑定 添加按钮事件绑定 实现添加业务逻辑 ...
- vue实现图书管理案例
需求: 1. 动态在页面中展示图书列表: 2. 在输入框中输入图书名称,按回车键实现图书添加功能(图书名称不能为空): 3. 点击"删除&qu ...
- AndroidStudio案例——图书列表
目录 实验内容及步骤 步骤: 运行结果: 1.配置drawable文件 2.配置listiem.xml文件 3.导入到activity_main.xml中 4.配置Java代码 [Java代码详解] ...
- 026_图书管理案例
1. 新建一个名为Books的动态Web工程 1.1. 添加gson-2.8.5.jar 1.2. 编写Book.java package com.bjbs.action;import java.io ...
最新文章
- F5荣获网络优化类别年度最佳HP AllianceOne合作伙伴奖项
- html multiply属性,NonCommutativeMultiply
- Java黑皮书课后题第6章：*6.39（几何：点的位置）编程练习题3.32显示如何测试一个点是否在一个有向直线的左侧、右侧或在直线上，编写一个程序，输入三个点p0p1p2，显示p2是否在直线p0p1
- Seaborn——绘制统计图形
- UVA12511 - Virus（DP+最长公共上升子序列）
- 一键了结CUP100%问题
- 国产游戏版号时隔8个月重启 游戏公司董事长喜极而泣
- scrapy commandline
- swift开发的小坑
- 概率论经典问题 —— 三个事件 A、B、C 独立 ≠ 三个事件两两独立
- 知乎引流实操：日吸200精准粉丝玩法分享
- 安全测试者偏爱的安全测试工具
- OPPOR7Splus_官方线刷包_救砖包_解账户锁
- python自动生成文章原创_Python文章原创度检测脚本【亲测有效】
- 三菱plc编程2000个实例
- 苹果手机安兔兔压力测试软件,10款跑分软件压力测试(一)
- pip install时timeout设置
- 本科计算机考研考英语,2016考研必需知道的10件事
- 鸿鹄系统和鸿蒙系统的区别,华为鸿蒙系统和全新的鸿鹄处理器将于8月9日正式发布，荣耀首发...
- iPhone屏幕适配(之屏幕尺寸)