Vue基础-2(v-text、v-html)

Vue基础-2(v-text、v-html)

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

例：

<div id="app">
  <h2 v-text="message+'!'">看不见我</h2>
  <h2>喔嚯{{message + "!"}}看得见</h2>
</div>

var app = new Vue({
  el:"#app",
  data:{
     message:"欧尼哈撒呦"
  }
})

页面显示：

v-html：设置标签的innerHTML
设置标签的innerHTML
v-html指令的作用是：设置元素的innerHTML
v-html内容中有html结构会被为解析为标签
v-text指令无论内容是什么，只会解析为文本

例：

<div id="app-2">
  <p v-html="content"></p>
  <p v-text="content"></p>
</div>

var app2 = new Vue({
  el:"#app-2",
  data:{
     // content:"2020年6月22日"
     content:"<a href='http://www.baidu.com'>百度一下</a>"
  }
})

页面显示：