vue.js文本绑定的三种方式以及它们之间的区别

最新推荐文章于 2024-01-12 12:55:22 发布

岚岚猫

最新推荐文章于 2024-01-12 12:55:22 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签：前端 javascript框架 IT js web

本文链接：https://blog.csdn.net/qq_42506869/article/details/90726367

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文本绑定的三种方式

1.<div id="first">{{text}}</div>
利用双重大括号来进行文本绑定，详细请看下述代码

<div id="first">
		{{text}}
	</div>
	<script >
		new Vue({
			el:'#first',
			data:{
				text:'Hello world'
			}
		})
	</script>

2.<div id="first" v-html="text">
详细请看下列代码：

<div id="first" v-html="text"></div>
	<script >
		new Vue({
			el:'#first',
			data:{
				text:'Hello world'
			}
		})
	</script>

3. <div id="first" v-text="text"></div>
详细请看下列代码：

<div id="first" v-text="text"></div>
	<script >
		new Vue({
			el:'#first',
			data:{
				text:'Hello world'
			}
		})
	</script>

三种方式之间的区别

双花括号与v-text方式相比
在网络延迟较为严重的时候，双花括号方式会首先将文本绑定以html标记的方式先渲染出来，然后才在js脚本的加载下，重新显现出我们所绑定的文本内容，而v-text方式在js脚本未加载出的情况下什么都不会显现。
下面我将模拟下网络延迟严重的情况下，两种方式的不同之处。
下面是代码：

<body>
	<div id="first">
		<div v-text="text"></div>
		<div>{{ text }}</div>
	</div>
	<script type="text/javascript">
		setTimeout(function(){
			var tmp=document.createElement('script');
			tmp.src="test.js";
			document.body.appendChild(tmp,document.getElementsByName('script')[0]);
		},2000)
	</script>
</body>

test.js脚本中的代码：

new Vue({
			el:'#first',
			data:{
				text:'Hello world'
			}
		})

通过在浏览器中的显现我们可以看出当脚本延迟两秒加载时，对于两种方式的显现是不一样的。
当脚本未加载时：
js脚本未加载时，以htm标记的形式展现
当脚本加载后
在这里插入图片描述
**总结：**当脚本加载比较慢时，花括号绑定会显现出原来的绑定表面文字，脚本加载后才会显现出绑定的内容。而v-text方式只在脚本加载后才会进行显现，加载之前什么都不会渲染。

v-html方式的特殊之处
v-html方式绑定的文本可以包含html标签，并且将以html标记的方式渲染出来。而其他两者仅仅是将包含的html标签以普通文本的方式进行显现！
具体测试代码如下：

<body>
	<div id="first">
		<div v-text="text"></div>
		<div>{{ text }}</div>
		<div v-html="text"></div>
	</div>
	<script type="text/javascript">
		new Vue({
			el:'#first',
			data:{
				text:'<i>Hello world</i>'
			}
		})
	</script>
</body>

在浏览器中的渲染：
在这里插入图片描述
可看出，v-html将斜体标签进行渲染，而前两者只是进行普通文本的处理！