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:"欧尼哈撒呦"
  }
})

页面显示:
Vue基础-2(v-text、v-html)_第1张图片

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:"百度一下"
  }
})

页面显示:
在这里插入图片描述

你可能感兴趣的:(前端备忘录,vue,vue,html,javascript)