Vue学习笔记11：分别用纯JavaScript和Vue实现显示系统默认值及用户输入数据更新的实时视图显示-CFANZ编程社区

0 前言

在 Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们分别用纯JavaScript和Vue实现了数据更新的实时视图显示。

Vue学习笔记11：分别用纯JavaScript和Vue实现显示系统默认值及用户输入数据更新的实时视图显示_初始化

如果我们希望实现更多的功能，在文本输入框下面显示两段文字信息：

第一段显示系统默认的信息。

第二段显示用户第n次输入的信息。

那么用纯JavaScript和Vue如何实现呢？

1 用纯JavaScript来实现

我们以 Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客的代码【代码1】

<script>

function showMsg(s)
{
	document.getElementById("spanMsg").innerText = s;
}
</script>

<p style="font-size:18pt; font-weight:bold;">
	纯JavaScript实现数据更新的实时视图显示 
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	<input type="text"  id="tbMsg" value="请您输入信息" oninput="showMsg(this.value)" />
</p>

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>

为基础来改进。

1.1 改写网页元素描述代码

1.1.1 改写技术说明代码

将

<p style="font-size:18pt; font-weight:bold;">
	纯JavaScript实现数据更新的实时视图显示 
</p>

改为

<p style="font-size:18pt; font-weight:bold;">
	纯JavaScript显示系统默认值及用户输入数据更新的实时视图显示 
</p>

1.1.2 改写用户输入信息的文本框代码

由于我们将会有一个统一的默认值并使用JavaScript脚本来初始化，因此可以把用户输入信息的文本框的value属性去掉。

即将：

<p>请输入信息：
	<input type="text"  id="tbMsg" value="请您输入信息" oninput="showMsg(this.value)" />
</p>

改为：

<p>请输入信息：
	<input type="text" id="tbMsg" oninput="showMsg(this.value)" />
</p>

1.1.3 改写信息显示代码

原始的信息显示代码：

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>

只有一行，用来显示用户输入的信息。

现在我们要输出两行信息，要改为：

<p style="font-size:18pt; font-weight:bold;">
 	系统默认的信息是：
   <span id="spanDefault" style="color:purple"></span>
</p>

<p id="pN" style="font-size:18pt; font-weight:bold; display:none">
  您第<span id="spanN" style="color:red"></span>次输入的信息是：
   <span style="color:purple" id="spanMsg"></span>
</p>

改动比较大，主要有三个方面：

1.1.3.1 第一个方面

修改了原有的……并增加了一个……。

我们在第一段（第一个……）显示系统默认的信息。

在第二段（第二个……）显示用户第n次输出的信息。

1.1.3.2 第二个方面

由于我们将会有一个统一的默认值并使用JavaScript脚本来初始化，因此我们把原来网页标签中的默认值去掉了。

1.1.3.3 第三个方面

这一个方面需要特别强调。

首先，因为我们要使用JavaScript脚本更新信息，给所有需要更新信息的标签都指定了id，包括id="spanDefault"，id="pN"， id="spanN"，以便我们可以通过JavaScript脚本来进行操作。

其次，第二段信息应该在用户输入信息后才显示，所以我们使用style的属性display:none先将第二段信息隐藏进来，等用户输入信息后，我们再显示这第二段文字。

1.2 改写JavaScript脚本代码

1.2.1 调整JavaScript脚本代码和网页元素描述代码的顺序

在原始代码中，JavaScript脚本代码位于网页元素描述代码的前面。

现在，我们需要通过JavaScript脚本代码来对网页元素进行初始化操作，从逻辑上来说，应该是先有网页元素，JavaScript脚本代码才能起作用，所以我们把JavaScript脚本代码移动到网页元素描述代码的后面。

1.2.2 增加记录用户输入次数的变量n

因为我们输出的信息中包括用户输入的次数，所以我们需要定义一个全局变量n来存储用户输入的次数，并且初始化其值为-1。即：

var n = -1;

为什么是初始化为-1而不是0呢？我们在下面会说明。

1.2.3 修改函数showMsg

原始函数showMsg是在用户输入信息时执行，其代码为：

function showMsg(s)
{
	document.getElementById("spanMsg").innerText = s;
}

只有一行代码，就是显示用户输入的信息，很简单。

按照新的要求，我们需要更新用户输入次数，并根据用户输入次分别对第一段和第二段文字进行操作，因此改为：

function showMsg(s)
{
	++n;//用户输入次数+1
	
   if (n==0)
	{
    	//输出第一段文字
		document.getElementById("spanDefault").innerText = s;      
	}        
	else
	{
        //输出第二段文字
        document.getElementById("pN").style.display= "";//显示第二段文字		 
		document.getElementById("spanN").innerText = n; //显示用户输入的次数
		document.getElementById("spanMsg").innerText = s;//显示用户输入的信息
	} //if   	
}//showMsg()

主要功能是：

1.2.3.1 更新用户输入次数

showMsg()被执行，说明系统在初始化，或者用户在输入，我们要更新用户输入次数，即：

++n;

那么我们如何区分函数本次执行是在进行初始化还是因为用户在输入呢？

我们是通过变量n的值来区分的：

当n==0时，说明函数是在进行初始化。

当n > 0时，说明函数是因为用户在输入而执行。

由于函数执行时会首先执行变量n的值+1的操作，所以我们将变量n值初始化为-1。

1.2.3.2 输出默认值

如果变量n==0，说明是在进行初始化，我们就在第一段文字中输出系统默认值：

if (n==0)
	{
    	//输出第一段文字
		document.getElementById("spanDefault").innerText = s;      
	}

1.2.3.3 输出用户输入次数及输入的信息

如果变量n的值不等0，说明函数是因为用户在输入而执行，我们就显示和输出第二段文字：

else
	{
    //输出第二段文字
    document.getElementById("pN").style.display= "";//显示第二段文字		 
		document.getElementById("spanN").innerText = n; //显示用户输入的次数
		document.getElementById("spanMsg").innerText = s;//显示用户输入的信息
	} //if

1.2.4 增加初始化默认值的函数initMsg()

因为我们要通过脚本来进行初始化，所以增加一个函数initMsg，把需要初始化的代码放在这个函数里面来执行，即：

function initMsg()
{
 	var sDefaultMsg = "请您输入信息";//定义默认信息
	showMsg(sDefaultMsg); //显示默认信息
	document.getElementById("tbMsg").value = sDefaultMsg;//初始化用户输入框的内容
}//initMsg()

实现了三个方面的功能：

1.2.4.1 定义变量sDefaultMsg存储默认信息"请您输入信息"

1.2.4.2 显示默认信息

调用showMsg函数，把存储默认信息变量sDefaultMsg作为参数传递信息，完成信息的初始化

1.2.4.3 将用户输入框的内容初始化为默认默认信息值

1.2.5 执行initMsg函数进行初始化

即：

initMsg();//进行初始化

1.3 改造后的最终代码

综合以上修改后的最终代码如下【代码1.3】：

<p style="font-size:18pt; font-weight:bold;">
	纯JavaScript显示系统默认值及用户输入数据更新的实时视图显示 
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	<input type="text" id="tbMsg" oninput="showMsg(this.value)" />
</p>

<p style="font-size:18pt; font-weight:bold;">
 	系统默认的信息是：
   <span id="spanDefault" style="color:purple"></span>
</p>

<p id="pN" style="font-size:18pt; font-weight:bold; display:none">
  您第<span id="spanN" style="color:red"></span>次输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>

<script>
var n = -1;
  
function showMsg(s)
{
	++n;//用户输入次数+1
	
  if (n==0)
	{
    	//输出第一段文字
		document.getElementById("spanDefault").innerText = s;      
	}        
	else
	{
      //输出第二段文字
      document.getElementById("pN").style.display= "";//显示第二段文字		 
			document.getElementById("spanN").innerText = n; //显示用户输入的次数
			document.getElementById("spanMsg").innerText = s;//显示用户输入的信息
	} //if   	
}//showMsg()


function initMsg()
{
 	var sDefaultMsg = "请您输入信息";//定义默认信息
	showMsg(sDefaultMsg); //显示默认信息
	document.getElementById("tbMsg").value = sDefaultMsg;//初始化用户输入框的内容
}//initMsg()
  
initMsg();//进行初始化

</script>

1.4 代码运行效果

Vue学习笔记11：分别用纯JavaScript和Vue实现显示系统默认值及用户输入数据更新的实时视图显示_网页内容更新_02

2 使用Vue的一次性插值指令v-once来实现

在Vue中，提供了指令v-once实现一次性地插值，当数据改变时,插值处的内容不会更新。

我们可以在第一段文字中使用v-once指令来显示系统默认值。

具体实现步骤如下。

我们以 Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客的代码【代码2】

<script setup>

import { ref } from 'vue'

// var spanMsg = ref('请您输入信息')
const spanMsg = ref('请您输入信息')

</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" id="tbMsg" v-model="spanMsg" />
</p>

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple">{{ spanMsg }}</span>
</p>

</template>

为基础进行修改。

2.1 改写网页元素描述代码

2.1.1 改写技术说明代码

将

<p style="font-size:18pt; font-weight:bold;">
	使用Vue实现数据更新的实时视图显示 
</p>

改为

<p style="font-size:18pt; font-weight:bold;">
	使用Vue v-once指令显示系统默认值及用户输入数据更新的实时视图显示 
</p>

2.1.2 改写用户输入信息的文本框代码

我们要充分利用Vue的数据绑定特性，精简代码，不需要通过id来访问文本框了，所以我们可以去掉id属性。

即将：

<p>请输入信息：
	<input type="text" id="tbMsg" v-model="spanMsg" />
</p>

改为：

<p>请输入信息：
	<input type="text" v-model="spanMsg" /> 
</p>

2.1.3 改写信息显示代码

将

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple">{{ spanMsg }}</span>
</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 >

主要改动如下：

1.由于使用了vue，我们不再需要通过id来访问网页标签元素，所以我们清除了网页标签元素中原有的id属笥。

2.在第3行代码中的增加了v-once指令，这样一来，虽然文本框的内容与变量spanMsg作了双向绑定，但变量spanMsg的值因用户输入而变化时，中的信息并不会相应更新。

3.增加了6-8行代码，作为第二段文字，用来显示用户输入信息的次数和输入的信息内容。

这里有两点要注意：

第一点，我们在第6行里使用条件渲染指令 v-if="n++ > 0" ，因为我们要通过n的值来控制第二段文字的显示状态：

当n > 0时，第二段文字才显示，否则第二段文字是隐藏的。

比较结束后n的值会+1。

第二点，第7行中我们显示的次数时用的表达式是n-1 而不是 n。

这是因为当用户进行第1次输入时，n的值为1，在作 n++ > 0 的判断后，n的值会+1变成2，但实际上这是第1次输入，所以我们在输出用户输入次数时要-1。

2.2 改写JavaScript脚本代码

为了记录用户输入信息的次数，我们需要定义一个变量n并初始化其值为0，用来保存用户输入信息的次数。即：

var n = 0;

2.3 改造后的最终代码

综合以上修改后的最终代码如下【代码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" id="tbMsg" 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>