Vue3 v-pre-Direktive
Vue3 Eingebaute Direktivenv-preDie Direktive wird verwendet, um die Kompilierung zu überspringen, und führt kein Vue-Template-Parsing für das Element oder seine untergeordneten Elemente durch.
Grundlegende Erklärung
v-preDie Direktive wird verwendet, um Vue anzuweisen, die Kompilierung dieses Elements und aller seiner untergeordneten Elemente zu überspringen. Elemente mit v-pre werden als rohes HTML gerendert, ohne Verarbeitung der Vue-Template-Syntax.
- Erwarteter Typ: None (akzeptiert keinen Ausdruck)
- Zweck: Kompilierung überspringen, kein Vue-Template-Parsing für das Element oder seine untergeordneten Elemente durchführen.
Verwendungsszenarien
1. Rohe Mustache-Tags anzeigen
v-pre wird am häufigsten verwendet, um die rohe Syntax {{ }} anzuzeigen:
Beispiel
<template>
<div>
<p>Normales Rendering: {{ message }}</p>
<p v-pre>Nicht kompilierte Anzeige: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return { message: 'Hello Vue' }
}
}
</script>
<div>
<p>Normales Rendering: {{ message }}</p>
<p v-pre>Nicht kompilierte Anzeige: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return { message: 'Hello Vue' }
}
}
</script>
Ausgabeergebnis:
正常渲染: Hello Vue
不编译显示: {{ message }}
Andere Erweiterungen