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的值
·
Vue指令之v-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指令内部支持表达式
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)