灵活多变vue常用小案例系列（如何避免把数据写死？）

Posted 2023-03-18

参考技术A 方法一：动态绑定class对象

方法二：用函数方法动态绑定class

实现鼠标点击效果

这个案例同样适用轮播图的页码器。

原型：事件冒泡

使用了.stop事件修饰符后，不会层层往上报，事件各种独立，我们真实的应用场景是想点击第四个盒子触发事件，没必要去触发其他盒子的点击事件。

先来看看原型：

很遗憾，本人小白一个，目前并不会手动架一个服务器，但还是看到效果的，虽然控制台输出的submit一闪而过，但我们可以确认到它提交的数据默认是上传了的。

在真实应用场景中，我们是不希望把表单数据直接默认给到服务器中的，而是在本地手动收集和提交数据（我们只想看数据打印，而不是提交服务器中）.这时候就用到了.prevent修饰符。

先来看看原型：

某些应用场景我们只希望点击一次，这就用到了.once事件修饰符。

可以看到我们无论点击了多少次按钮，都只会触发第一次的点击事件。

先来看看原型：

而在某些具体应用场景，我们只想捕捉到用户按下回车键那一刻即可，其他的都不需要。

但我们一般不会将数据写死，而是通过变量监控布尔值的变化。

虽然可以实现，但这种体验非常不好。

像这种复杂的逻辑关系,更适合使用computed属性

但还是有缺陷和不足，分数的上下限，其他字符没有限制输入。