v-text和v-html的区别是什么？

v-text

介绍：v-text是内容渲染指令，用来辅助开发者渲染 DOM 元素的文本内容

作用：设置或更新元素的内容

语法：<标签 指令='值'></标签>，如 与插值表达式的共同点

1. 可以设置标签的内容
2. 可以拼接字符串，使用api,三元表达式

与插值表达式的区别：

插值表达式可以部分更新，而v-text会完全更新标签之间的内容，意味着如果标签之间如果还有其它的内容，使用v-text会将原始的内容完全覆盖掉

<template>
  <div>
      <h1>v-text的使用</h1>
      <!-- 使用插值 -->
      <p>还有别的内容哦：{{msg}}</p>
      <!-- 使用v-text -->
      <p v-text="msg"></p>
      <p v-text="msg.toUpperCase()"></p>
      <p v-text="'我对你说'+msg">还有别的内容哦：</p>
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:'hello'
        }
    }
}
</script>

v-html

介绍：v-html是内容渲染指令，用来辅助开发者渲染 DOM 元素的文本内容

作用：设置或更新元素的内容

语法：<标签 指令='值'></标签>，如

与v-text的共同点：

1. 可以设置标签的内容，对标签之间的内容完全替换
2. 可以拼接字符串，使用api,三元表达式

<template>
  <div>
    <h1>这个文件主要说明v-html的使用</h1>
    <h2>它和v-text一样,可以对标签之间的内容进行完整的更新,但是它可以解析html结构</h2>
    <p>{{msg}}</p>
    <p v-text='msg'>原始的内容</p>
    <p v-html='msg'>原始的内容</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello <hr/>'
    }
  }
}
</script>

v-html与v-text的区别：

v-text会将内容原样输出，而v-html会对内容进行html解析，如果内容是合法的html结构，则会解析出对应的网页结构