<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{ isLogin ? '登录' : '注册' }}</h1>
<form action="" v-if='isLogin' >
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<input type="submit" name="" id="" value="登录" />
</form>
<form action="" v-if='!isLogin'>
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<input type="password" placeholder="请再次输入密码" />
<input type="submit" name="" id="" value="注册" />
</form>
<hr />
<hr />
<form action="" v-show='isLogin' >
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<input type="submit" name="" id="" value="登录" />
</form>
<form action="" v-show='!isLogin'>
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<input type="password" placeholder="请再次输入密码" />
<input type="submit" name="" id="" value="注册" />
</form>
<!--
条件渲染：
v-if:在只渲染一次的情况下，那么性能最佳
v-show:在频繁切换的情况下，那么性能最佳，因为v-show，所有都生成出来，通过display来决定是否显示
-->
<button @click='login'>登录</button>
<button @click='register'>注册</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
isLogin:true
},
methods:{
register:function(){
this.isLogin = false
},
login:function(){
this.isLogin = true
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号