vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解
==如何使用Vue：
基本结构
文章目录
- 目标两个例子:
- 1.表单数据一行的创建+删除(彻底删除/隐藏双实现)
-
- 代码+注释
- 判断为空效果如下:
- 2.计算商品总价格
-
- 代码+注释
- 本人其他相关文章链接
目标两个例子:
1.表单数据一行的创建+删除(彻底删除/隐藏双实现)
代码+注释
特色:1:内容提前判断为空的功能,红色字显示,且无法实现创建功能,只有全部符合要求才可以创建用户
2:创建的用户自动追加到最后一行数据
3:所有数据都存储在组件data中,body标签中没有任何数据,即都是从data中动态获取出来的
判断为空效果如下:
Title
姓名
性别
年龄
手机
删除
{{person.name}}
{{person.sex}}
{{person.age}}
{{person.tel}}
2.计算商品总价格
特色:1:隔行换色
2:数量为0时不会再减少,即不会出现负数
3:删除某一行总金额钱数也会动态跟着改变
4:初始表没有信息将不会显示表格,且左下方显示:暂无数据…
添加一个初始判断语句,当属性表格没数据是显示:
代码+注释
Title
编号
名称
单价
数量
操作
{{product.id}}
{{product.name}}
{{product.price}}
{{product.num}}
总金额:{{sum()}}
暂无数据......
本人其他相关文章链接
1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
4.《基础篇第4章》：使用vue脚手架创建项目
5.vue2知识点：数据代理
6.vue2知识点：事件处理
7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）
8.vue2知识点：计算属性与监听属性
9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）
10.vue2知识点：非单文件组件和单文件组件
11.vue2知识点：组件is属性
12.vue2知识点：组件模板定义
13.vue2知识点：组件的props属性、非props属性、props属性校验
14.vue2知识点：组件自定义事件
15.vue2知识点：组件插槽分发
16.vue2知识点：动态组件
17.vue2知识点：混入
18.vue2知识点：浏览器本地缓存
19.vue2知识点：全局事件总线（GlobalEventBus）
20.vue2知识点：消息订阅与发布
21.vue2知识点：nextTick语法
22.vue2知识点：Vue封装的过度与动画
23.vue2知识点：路由
24.vue2知识点：vm调用待$命令介绍
25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）
26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解
27.vue2基础组件通信案例练习：待办事项Todo-list案例练习
28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存
29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件
30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线
31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布
32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮
33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度
34.学习vue2遇到过的问题及个人总结