Vue2之v-text指令的基本使用
发布：智码IT网 阅读：
<!--
v-text指令：设置标签的文本值tetContent
-->
<div id="app">
<!-- v-text指令设置的值，会覆盖标签本身的内容 -->
<h1 v-text="message">标签的原始内容</h1>
<!-- v-text指令 读取复杂的数据 -->
<h1 v-text="Person.Name"></h1>
<!-- v-text指令:即便是一个<a>标签，依然当成普通文本输出 -->
<h1 v-text="url"></h1>
<!-- 使用插值表达式，替换部分内容 -->
<h1>你好：{{Person.Name}}</h1>
<!-- 使用插值表达式，可以拼接其他字符串 -->
<h1>{{'你好：' + Person.Name}}</h1>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.common.dev.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
Person: {
Name: "张三",
Age: 10,
},
message: "test",
url: '<a href="" target="_blank">智码IT网</a>',
},
});
</script>
效果：
上一篇：没有了
下一篇：没有了