La directiva v-html es una directiva de Vue.js que se usa para actualizar el HTML interno de un elemento con nuestros datos. Esto es lo que lo separa de v-text, lo que significa que mientras v-text acepta una string y la trata como una string, aceptará una string y la convertirá en HTML. Primero, crearemos un elemento div con id como aplicación y aplicaremos la directiva v-html a este elemento con datos como mensaje. Ahora crearemos este mensaje inicializando una instancia de Vue con el atributo de datos que contiene nuestro mensaje.
Los estilos con alcance no se aplicarán a v-html, porque Vue no compila ese HTML. Para aplicarle estilos, intente usar estilos globales o algunos otros módulos CSS.
Sintaxis:
v-html="data"
Parámetros: esta directiva acepta un solo parámetro que son los datos en forma de string.
Ejemplo: este ejemplo usa VueJS para actualizar el html de un elemento con v-html.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-html directive
</title>
<!-- Load Vuejs -->
<script src=
"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
VueJS | v-html directive
</b>
</div>
<div id="canvas" style="border:1px solid #000000;
width: 600px;height: 200px;">
<div v-html="message" id="app">
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '<h1>HELLO '+
'<span style="color:blue;">'+
'WORLD</span>'+
'</h1>'
}
})
</script>
</body>
</html>
Producción:
