vue指令_v-text和v-html

vue指令 v-text和v-html

• 语法:
  • v-text=“vue数据变量”
  • v-html=“vue数据变量”
    == * 注意: 会覆盖插值表达式 ==

<template>
  <div>
      <!-- 直接已文本的方式输出 -->
      <p>{{msg}}</p>
      <!-- 💥 标签内的内容 会被v-text 覆盖 ，写的时候  保留标签内空内容 -->
      <p v-text="msg">111111</p>
      <!-- v-html  如果包含 html 标签，会动态创建 html 标签并写入到页面中 -->
      <p v-html="msg">222222</p>
  </div>
</template>

<script>
export default {
data () {
    return {
        msg:"<i>这是一个i标签</i>"
    }
}
}
</script>

<style>

</style>

总结: v-text把值当成普通字符串显示, v-html把值当做html解析