简单Vue例子进阶

前言

本来昨天老早就写好了,但是强迫症作祟,一直改啊改,改到现在.我还有救吗?

预览图

源码

css部分:

html部分:

vue.js部分:

 

 

需求:
选项卡
输入验证:名字必须为汉字或英文,价格必须是数字,错误则显示红色边框
添加验证 :必须上面两条同时满足才允许添加,否则提示输入错误

主要应用的技术:
1.排版太基础就不说了
2.v-on:click/v-on:keyup(@click/@keyup)为选项卡绑定点击事件
3.v-bind:class(:class)指令为选项卡绑定属性事件
4.v-if指令,满足条件显示当前节点
5.*v-check全局指令
6.v-model指令单向数据绑定

遇到的难点:
1.输入框有两个,使用v-check时会同时改变
2.验证布尔值冲突,其中一个true了,另一个也跟着true

解决办法:
1.判断binding的value与oldValue是否相同来选定真正有变化的输入框
2.定义两个全局变量,分别作为价值,商品名的开关

下篇预告:

实现删除修改操作,并添加分页显示效果,最后移植进Vue.cli中;