v-html

把字符串识别为html片段 注意：不会识别成vue组件，仅为普通html 官网：在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 v-html 的内容也支持 scoped CSS，你可以使用 CSS modules 或使用一个额外的全局 <style/> 元素，手动设置类似 BEM 的作用域策略。

例如：

---

<font color='red'>1234123</font>

1234123

---

<script setup>
import { ref } from 'vue'

const rhtml = "<font color='red'>1234123</font>"
  
</script>

<template>
  {{rhtml}}							
  <div v-html="rhtml"></div>
</template>

v-text

​ 效果同模版插值语法{{ }}

---

123

输入：
123

---

<script setup>
import { ref } from 'vue'

const msg = ref("123")
</script>

<template>
  <div v-text="msg"></div>
 输入： <input v-model="msg">
  <br>
  {{msg}}
</template>

v-pre

与原版<pre></pre>作用相似，在vue中不渲染vue组件的语法

---

dsadasd

{{msg}}

---

<script setup>
import { ref } from 'vue'
const meg = ref('dsadasd')
</script>
  
<template >
{{meg}}
<p v-pre>{{msg}}</p>
</template>