版权声明：本文为博主原创文章，转载请标明出处。 https://blog.csdn.net/dulinanaaa/article/details/80612744
<!DOCTYPE html>
<html>
<head>
<title>page2</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="http://bj.xdf.cn/huodong/js/jquery-1.12.3.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="example">
<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<button @click="toggleLoginType">Toggle login type</button>
<h1 v-show="ok">Hello!</h1>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
ok: true,
type: "A",
loginType: 'username'
},
methods: {
toggleLoginType: function () {
return this.loginType = this.loginType === 'username' ? 'email' : 'username'
}
}
})
</script>
</body>
</html>