Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<template> <!-- Raw HTML — trust the source! --> <div v-html="sanitisedHtml"></div> <!-- Complex expressions in interpolation --> <p> {{ items.length > 0 ? items.map(i => i.name).join(', ') : 'No items yet' }} </p> <!-- v-pre: skip Vue compilation --> <span v-pre>{{ this will render as literal text }}</span> <!-- v-cloak: hide before hydration --> <!-- Add [v-cloak] { display: none } to CSS --> <div v-cloak> <p>{{ lazyMessage }}</p> </div> <!-- Dynamic attribute names (rarely needed) --> <button :[dynamicAttr]="dynamicValue">Dynamic Attr</button> </template> <script setup> import { ref } from 'vue'; const sanitisedHtml = ref('<strong>Bold</strong> and <em>italic</em>.'); const lazyMessage = ref('Loaded!'); const items = ref([{ name: 'Alpha' }, { name: 'Beta' }]); const dynamicAttr = ref('title'); const dynamicValue = ref('Tooltip text'); </script>
Result
Open