0 前言
在 Vue学习笔记11：分别用纯JavaScript和Vue实现显示系统默认值及用户输入数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客 中，分别用纯JavaScript和Vue实现了显示系统默认值及用户输入数据更新的实时视图显示的功能。
其实我们只显示了用户最后一次输入的信息。
如果我们想记录和显示用户输入的所有信息，分别用纯JavaScript和Vue，该如何实现呢？
1 用Vue实现的思路
我们先用Vue来实现。
实现的思路和技术要点有3点：
- 使用数组aRec来存储用户输入的信息
- 使用Vue的v-on指令绑定事件，将用户输入的信息存入数组
- v-for指令循环输出数组中的信息
2 改造代码
我们以 Vue学习笔记11：分别用纯JavaScript和Vue实现显示系统默认值及用户输入数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客 中的代码【代码2.3】
<script setup>
import { ref } from 'vue'
var spanMsg = ref("请您输入信息")
var n = 0;
</script>
<template>
<p style="font-size:18pt; font-weight:bold;">
使用Vue v-once指令显示系统默认值及用户输入数据更新的实时视图显示
</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
by PurpleEndurer
</p>
<p>请输入信息：
<input type="text" v-model="spanMsg" />
</p>
<p style="font-size:18pt; font-weight:bold;">
系统默认信息是：
<span v-once style="color:purple" >{{ spanMsg }}</span>
</p>
<p v-if="n++ > 0" style="font-size:18pt; font-weight:bold;">
您第{{ n-1 }}次输入的信息是：
<span style="color:purple" >{{ spanMsg }}</span>
</p >
</template>为基础进行修改。
2.1 改写网页元素描述代码
2.1.1 改写技术说明代码
将
<p style="font-size:18pt; font-weight:bold;">
使用Vue v-once指令显示系统默认值及用户输入数据更新的实时视图显示
</p>改为
<p style="font-size:18pt; font-weight:bold;">
使用Vue记录和显示用户输入的所有信息
</p>2.1.2 修改用户输入信息的文本框代码
之前我们为文本框设置了默认信息，用来提示用户输入信息，但是用户在输入时一般要删除默认信息。
为了不给用户添加麻烦，我们利用网页元素标签的placeholder属性来描述输入字段预期值的简短的提示信息，这个提示信息会在用户输入值之前显示在输入字段中。
即将：
<p>请输入信息：
<input type="text" v-model="spanMsg" />
</p>改为
<p>请输入信息：
<input type="text" v-model="spanMsg" placeholder="请输入信息" />
</p>在placeholder属性中，我们设置提示信息为：请输入信息
2.1.3 增加一个“确定”按钮
因为之前的代码功能实现的是用户每一次按钮我们就记录，这样记录到的信息并不是用户所要输入的完整信息，所以我们要在用户输入信息的文本框后增加一个“确定”按钮，当用户点击这个“确定”按钮，我们才进行记录。
即将：
<p>请输入信息：
<input type="text" v-model="spanMsg" placeholder="请输入信息" />
</p>改为：
<p>请输入信息：
<input type="text" v-model="spanMsg" placeholder="请输入信息" />
<input type="button" value="确定" @click="onClick" />
</p>在这里，我们增加了网页元素按钮的的代码，并且用 @click="onClick 绑定了按钮的点击事件。
2.1.4 修改显示信息代码
在Vue学习笔记7：使用v-for指令渲染列表_PurpleEndurer@5lcto的技术博客_51CTO博客 中我们曾使用v-for指令来输出水果数组中的信息。
现在，我们将用户每次点击确定按钮后输入的信息存储到数组aRec中，也可使用v-for指令来输出数组aRec中存储的信息。
即将：
<p style="font-size:18pt; font-weight:bold;">
系统默认信息是：
<span v-once style="color:purple" >{{ spanMsg }}</span>
</p>
<p v-if="n++ > 0" style="font-size:18pt; font-weight:bold;">
您第{{ n-1 }}次输入的信息是：
<span style="color:purple" >{{ spanMsg }}</span>
</p >改为：
<div v-for="(v,i) in aRec">
<p>第{{ i+1 }}次输入：{{ v }}</p>
</div>因为我们要同时输出用户输入的次数和该次输入的内容，所以我们在v-for指令中使用了v和i两个参数，其中：
i代表用户输入的次数，由于i的值是从0开始的，所以我们在输出时要+1。
v代表用户本次输入的内容，即v=aRec[i]。
2.2 改写JavaScript脚本代码
2.2.1 修改spanMsg的初始值
虽然我们已经使用文本框的placeholder属性设置了提示信息，但是我们已经将文本框的value值与spanMsg作了双向绑定，spanMsg的初始值会显示在文本框中，placeholder属性设置的提示信息就不会显示出来。
为了让placeholder属性设置的提示信息显示出来，我们可以将spanMsg的值设置为空字符串。
即将：
var spanMsg = ref("请您输入信息")改为
var spanMsg = ref("")2.2.2 增加数组aRec
我们需要将用户每次输入的信息存储并输出，最方便的莫过于使用数组了。所以我们要定义一个数组aRec，即增加代码：
var aRec = new Array();2.2.3 增加事件处理函数
我们增加了“确定”按钮，并且绑定了click事件，需要增加一个事件处理函数，即：
function onClick()
{
aRec.push(spanMsg.value);//将用户输入的信息存储到数组末尾
}本来事件处理函数有一个类型为event的隐式传入参数，因为我们不使用这个参数，所以我们就没有指明这个参数。
2.3 改造后的最终代码
综合以上修改后的最终代码如下【代码2.3】：
<script setup>
import { ref } from 'vue'
var spanMsg = ref("")
var aRec = new Array();
function onClick()
{
aRec.push(spanMsg.value);////将用户输入的信息存储到数组末尾
}
</script>
<template>
<p style="font-size:18pt; font-weight:bold;">
使用Vue记录和显示用户输入的所有信息
</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
by PurpleEndurer
</p>
<p>请输入信息：
<input type="text" v-model="spanMsg" placeholder="请输入信息" />
<input type="button" value="确定" @click="onClick" />
</p>
<div v-for="(v,i) in aRec">
<p>第{{ i+1 }}次输入：{{ v }}</p>
</div>
</template>2.4 代码运行效果
3 小结
我们使用Vue的v-on指令绑定事件和v-for指令循环输出来实现记录和显示用户输入的所有信息的功能。
但是代码运行时还存在一个问题。
在正常情况下，当用户输入信息，点击“确定”按钮完成输入后，就应该输出本次输入的次数和输入的内容。
我们的代码运行时却慢了一拍，当用户输入第n+1一次的信息后，才会显示之前的n次信息。
换而言之，就是页面信息更新不够及时。
这应该与Vue的数据刷新机制有关。
Vue提供了强制更新的方法 ，即this.$forceUpdate()，但是使用这个方法资源开销可能会比较大。
接下来我们会尝试使用其它方法 来解决这个问题。
