v-text
v-text 指令主要用来编辑标签中的文本，传入的值默认是 string 类型，我们也可以添加其他类型变量，或者是表达式和函数
<h1 v-text="str"></h1> <!-- string类型 --> <h1 v-text="num"></h1> <!-- number类型 --> <h1 v-text="bool"></h1> <!-- boolean类型 --> <h1 v-text="str + num"></h1> <!-- 表达式 --> <h1 v-text="text(1, ‘00‘)"></h1> <!-- 函数 -->
v-text 不能编译 html 代码，只能输入固定的值，它会把模板字符串的内容以字符串的形式在双标签中打印出来
<div v-text="test()"></div>
test() { return ` <h1>输入框</h1> <input type="text"> `; },
使用 v-text 时，v-text 传入的内容会替换 DOM 元素的所有子元素
<div v-text="str"> <h1>这是一个h1标签</h1> </div>
v-html
v-text 能做的 v-html 都能做，v-html 指令主要用来在标签中编译 html 代码，通过 v-html 指令，我们可以把 DOM 的模板字符串编译进双标签之间
<div v-html="test()"></div>
test() { return ` <h1>输入框</h1> <input type="text"> `; },