Vue3 v-pre directiva

Vue3 内置指令Vue3 directivas integradas

v-preLa directiva se usa para omitir la compilación, no realiza el análisis de la plantilla de Vue en el elemento ni en sus elementos hijos.

Descripción básica

v-preLa directiva se usa para decirle a Vue que omita la compilación de este elemento y todos sus elementos hijos. Los elementos con v-pre se renderizan como HTML sin procesar, sin procesamiento de sintaxis de plantilla de Vue.

  • Tipo esperado: Ninguno (no acepta expresiones)
  • Efecto: Omitir la compilación, no realizar el análisis de plantilla de Vue en el elemento ni sus elementos hijos.

Casos de uso

1. Mostrar etiquetas Mustache sin procesar

v-pre se usa más comúnmente para mostrar la sintaxis sin procesar {{ }}:

Ejemplo

<template>
  <div>
    <p>Renderizado normal: {{ message }}</p>
    <p v-pre>Renderizado sin compilar: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { message: 'Hello Vue' }
  }
}
</script>

Salida:

正常渲染: Hello Vue
不编译显示: {{ message }}

Vue3 内置指令Vue3 directivas integradas

Otras extensiones