Vue.js 入门(处理用户输入——按钮 / 输入框)

时间:2024-04-09 12:16:43

其实两天前就学这个了,但这两天有点拖沓,为了教同学还先学了个跑马龙(蛮好玩的,其实就是封装计时器,晚点再写一篇)

.

.

个人理解: 用户输入分为按钮(点击)和输入框(键盘)两种方式。你这么想,点击也是输入的一种,通过按钮实现;键盘输入也是输入的一种,通过对话框实现。总之都是有关获取用户输入并加工的等等相关部分

这是目前我能了解的部分,当然肯定不止这两种,不过这些都是后话,那我们现在来说一说这两种方式的运用

.

.

按钮输入:

Vue.js 入门(处理用户输入——按钮 / 输入框)
Vue.js 入门(处理用户输入——按钮 / 输入框)
点击按钮后(如下)
Vue.js 入门(处理用户输入——按钮 / 输入框)
这个是怎么实现的呢?
具体还得谈谈代码中25行的三个函数:
(PS:解释的来源 https://blog.csdn.net/weixin_37404604/article/details/80046771)

1、splite(’ ‘)可以将字符串按某个字符或者其他分割。返回数组。
2、reverse()该方法会改变原来的数组,而不会创建新的数组。此函数可以将数组倒序排列。
3、join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(’ ');

即先把目的字符串分割为数组,再倒序排列,最后用这个新数组重新生成字符串(easy~)

可能有些人理解的难点在:为什么点击也算是输入
想不明白就不想,会用就行

.

.

输入框输入:

Vue.js 入门(处理用户输入——按钮 / 输入框)
Vue.js 入门(处理用户输入——按钮 / 输入框)
通过 v-modle 把message和对话框内容连接起来
此时对话框内如何变化,上方内容就会如何变化,无论增怎样变化
Vue.js 入门(处理用户输入——按钮 / 输入框)