Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<template> <!-- Text interpolation --> <h1>{{ title }}</h1> <p>Status: {{ isActive ? 'Active' : 'Inactive' }}</p> <!-- v-bind shorthand for attributes --> <a :href="profileUrl" :title="'Visit ' + username"> {{ username }} </a> <!-- Dynamic class and style bindings --> <div :class="{ active: isActive, 'text-danger': hasError }" :style="{ color: textColor, fontSize: fontSize + 'px' }" > Styled element </div> <!-- Spread all attributes from an object --> <input v-bind="inputAttrs" /> </template> <script setup> import { ref } from 'vue'; const title = ref('Vue Template Syntax'); const isActive = ref(true); const hasError = ref(false); const profileUrl = ref('https://example.com'); const username = ref('Alice'); const textColor = ref('royalblue'); const fontSize = ref(16); const inputAttrs = ref({ type: 'text', placeholder: 'Enter value', maxlength: 100 }); </script>
Result
Open