Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<template> <div> <!-- v-bind: bind attributes --> <img :src="imageUrl" :alt="imageAlt"> <!-- v-model: two-way binding --> <input v-model="username" placeholder="Enter name"> <p>Hello, {{ username }}</p> <!-- v-show vs v-if --> <p v-show="isLoggedIn">Welcome back!</p> <p v-if="!isLoggedIn">Please log in.</p> <!-- v-for with index --> <ol> <li v-for="(fruit, index) in fruits" :key="index"> {{ index + 1 }}. {{ fruit }} </li> </ol> <!-- v-on shorthand @ --> <button @click.prevent="handleClick">Submit</button> </div> </template>
Result
Open