<!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>