vue-learning/hello/index.html

38 lines
1.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>titleee</title>
<link rel="stylesheet" href="style.css">
<script src="https://vuejs.org/js/vue.js"></script><!-- dev version -->
</head>
<body>
<div id="app">
<p v-bind:title="label">
{{ message }}
<button v-on:click="showspan = !showspan">toggle</button>
<transition name="fade">
<span v-if="showspan">Now you see me</span>
</transition>
</p>
<ol>
<todo-item
v-for="item in todos"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
<button v-on:click="reverseMessage">Reverse Message</button>
<input v-model="message"> <span>{{ lenMessage }}</span>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">class</p>
</div>
<script src="app.js"></script>
</body>
</html>