【Vue】常用指令之v-text小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 📝【Vue】学习养成记，【

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

📝【Vue】学习养成记，【程序员必备小知识】

📔 今日小知识——Vue常用指令之v-text

1.v-text该怎么使用呢？？？

2.插值表达式

3.总结

v-text 指令，从这个指令我们不难看出，这个肯定就是文本有关系的(因为有text哈哈😁)，没错v-text 指令其实就是设置标签的文本值的（textContent）。

1.v-text该怎么使用呢？？？

我们先在被vue实例挂载的标签div中，放入一个h3标签，在h3标签内部写入v-text指令， <h3 v-text="name"></h3>那么name的值哪里来呢？

这就需要在data中去定义了，这样h3标签的值就是name的值了，如下代码：

<body>
		<div id="app">
			<h3 v-text="name"></h3>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app",
				data:{
					name:"周杰伦"
				}
			})
		</script>
	</body>

注意：但是这种使用的话还是会有一个缺点，就是不管你h3标签里面原来的值是什么，都会被替换成name的值，所以想要不被替换的话，就用另一种方法：插值表达式

2.插值表达式

插值表达式的写法是这样子的👉{{ name }}，你只要把它写在标签的内部就可以了，它只会把大括号内的name属性的值去进行替换，那么我们来测试，看一下结果如何，如下图所示：

我们还可以对它进行字符串的拼接，如下图所示：

3.总结：

v-text指令的作用是：设置标签的内容
v-text指令默认写法会替换标签的全部内容，使用插值表达式{{}}可以替换指定的内容
v-text指令内部支持表达式

Vue 官方文档：vuejs.org/v2/guide/sy…

Vue 中文文档: cn.vuejs.org/v2/guide/sy…

4. 写在后面

关注我，更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹