Vue钩子函数acios（Vue钩子函数acios）



11月3号笔记

今日所学：VUE表实现，输入绑定，聚焦失焦

表实现：先前已经学习到了v-for和按钮的事件监测，这就意味着对于批量数据的处理应该是可以实现的，既存在一个表来展示数据，然后可以通过按钮的事件监听和触发来对表单元的数据进行删除。

需要用到的东西如下：

1、将索引值作为删除数据的参数，由此来对数据进行控制。

基本思路，在整个循环中确定所需要的索引，而后在监听事件调度函数时，直接作为阐述传递进去即可。

2、将ref的数组进行数据的移除。

直接调度ref的内置函数splice，以索引值和删除量确定删除效果即可。

但是有点让我不明白的是，为什么splice（粘黏）是删除（笑）。

老师提及到，checkbox可能会因为位置转移而发生偏移的情况，但是我本地并没有出现这样的问题。但总归是个问题，如何解决？其实已经解决了，之所以出现这个问题，是由于key默认设定为了index，所以经过删除-重置之后就转移到新的位置上去了。更改key指向数据的id即可避免这样的碰撞情况发生。

输入绑定：

先前学习了如何设置一个输入框，既直接使用<input>标签来构造一个输入框。但是很显然，只懂得呈现而不懂得如何将输入内容作为参数来使用是不可行的。由此，我们可以通过将input绑定一个数据即可。

Input输入后直接更改标签的内联事件实现方式如下。

其中的inputData为在JS中定义的一个ref响应式API。

在实际测试时，发现将第二句的属性绑定删去也是可行的，文星一言的解释是“在input事件发生时，会调度第三行的赋值语句，进而更改inputData的数据”。这本质上是一个由inputData数据向input的绑定，而第二行其实是input向value的绑定，既在value变化时input的内容会变。如果删除了后面的那行，则这个inputData数据在其他地方发生改变时，input内部的不会变化。

当然，这样的双向绑定过于冗杂，我们可以直接使用v-model来一步处理。其实v-model就是前两步的一个打包操作。

同时，还有两个属性需要认识到，既@fucus（聚焦）和@blur失焦。

整体实验代码如下。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/39390.html