Vue指令之v-text

最新推荐文章于 2024-05-09 18:04:48 发布

卡卡西Sensei

最新推荐文章于 2024-05-09 18:04:48 发布

阅读量5.4k

点赞数 1

分类专栏： # Vue指令 web前端 # Vue 文章标签： vue指令 v-text

本文链接：https://blog.csdn.net/zjpjay/article/details/110194199

版权

web前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

Vue

12 篇文章 2 订阅

订阅专栏

Vue指令

7 篇文章 5 订阅

订阅专栏

Vue指令之v-text

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

2.插值表达式

3.总结

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指令内部支持表达式

卡卡西Sensei

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue指令之v-text

Vue指令之v-text目录1.v-text该怎么使用呢？？？2.插值表达式3.总结：v-text 指令一看就是和文本有关系，没错其实就是设置标签的文本值（textContent）。1.v-text该怎么使用呢？？？我们先在被vue实例挂载的标签div中，放入一个h3标签，在h3标签内部写入v-text指令，<h3 v-text="name"></h3> ，那么name的值哪里来呢？...
复制链接

扫一扫