vue3个人心得---（指令初解）文本绑定指令v-text/v-html与文本插值

文本绑定指令v-text/v-html与文本插值

一、文本插值

节点

插入到 HTML 元素的文本是文本节点，元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。

文本插值

文本插值可以在文本节点内插入一个值，为了与原文本节点的文本区别开，采用双括号{{}}进行标记。

文本插值的类型

• 基本类型：数字、字符串、布尔。如果是字符串需要加引号以与变量加以曲别，不加引号会被当成变量类型处理。
• 变量类型：变量类型​的值不需加引号。
• 函数类型：函数类型的值不需加引号。函数类型要在函数名后加小括号以调用的形式才会返回值。否则只会返回函数本体。还可以是计算属性。
• 表达式类型：文本插值还可以是表达式

多个文本插值： {{}}内可以放置多个文本插值，之间使用+号隔开。

二、文本指令v-text

文本指令v-text会使标签下的文本子节点与指令值形成绑定，标签下如有其它子节点（即使不是文本子节点）会被覆盖掉，要慎用。
注意：当指令值有多个时，以[]方括号括起，各指令值不能以“，”逗号隔开，而要以+号隔开。

三、文本指令v-html

v-html 与 v-text 类似，绑定子节点的同时会覆盖掉标签下的其它子节点。
v-html能甄别文本和标签，把标签按html编译出来再输出。如下：

<script setup>
const count = "我是文本<p style='color:red'>我是标签</p>"
</script>
<template>
  <button v-text="count">
  </button>
  <button v-html="count">
  </button>
  <button v-html="`我是文本<p style='color:red'>我是标签</p>`">
  </button>
</template>

v-text是输出<p style='color:red'>5555</p>，而v-html输出红色的5555。
注意： v-html指令的值为子符时，如果包含标签，不能用引号而应用反引号。
当指令值有多个时，以[]方括号括起，各指令值不能以“，”逗号隔开，而要以+号隔开。