<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<p>--------------------</p>
<div v-if="flag">true</div>
<div v-else-if>false</div><!-- 根据条件变化会进行多次渲染，投机条件每次发生变化组件都会进行销毁和创建，并重新渲染 -->
<p>--------------------</p>
<div v-show="flag">true</div>
<div v-show="!flag">false</div><!-- 只会进行一次初始化渲染，把所有条件的组件都渲染出来，再根据条件变化进行CSS显示和隐藏 -->
<button @click="flag=!flag">btn</button>
</div>
<script src="js/vue.3.2.2.js"></script>
<script>
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
flag:false
}
}
}).mount('#app');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-if="loginType==='phone'">
<label>手机: </label>
<input type="text" placeholder="请输入手机号">
</br>
<label>密码：</label>
<input type="password" placeholder="请输入密码">
</div>
<div v-else-if="loginType==='email'">
<label>邮箱: </label>
<input type="text" placeholder="请输入邮箱号">
</br>
<label>密码：</label>
<input type="password" placeholder="请输入密码">
</div>
<p>---------------------------------------</p>
<div v-show="loginType==='phone'">
<label>手机: </label>
<input type="text" placeholder="请输入手机号">
</br>
<label>密码：</label>
<input type="password" placeholder="请输入密码">
</div>
<div v-show="loginType==='email'">
<label>邮箱: </label>
<input type="text" placeholder="请输入邮箱号">
</br>
<label>密码：</label>
<input type="password" placeholder="请输入密码">
</div>
<button @click="change">btn</button>
</div>
<script src="js/vue.3.2.2.js"></script>
<script>
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
loginType: 'phone'
}
},
methods:{
change(){
this.loginType === 'phone' ? this.loginType='email':this.loginType='phone';
// this.loginType === 'email' ? this.loginType='phone':tis.loginType='email';
}
}
}).mount('#app');
</script>
</body>
</html>
