阅读 130
【Vue】常用指令之v-text

【Vue】常用指令之v-text

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

📝【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. 写在后面

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

🌹 喜欢就点个赞吧👍🌹

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

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

文章分类
前端
文章标签