vue系列---三元表达式和if进行页面的切换

直接上测试代码：

<template>
  <div class="login-box">
      <div class="login">
        <div class="login-title">
        <h2>登录</h2>
        </div>  
        <template v-if="typelogin === 'motype'">
            <div class="form-box">
                <span>这里是登录方式一</span>
            </div>
        </template>  
        <template v-else>
            <div class="form-box">
                <span>第二种登录方式</span>
            </div>
        </template>         
        <input class="com-btn" type="button" v-model="btnvue" @click="changetype">
      </div>
  </div>
</template>

<script>
export default {
   name:"login",
   data(){
       return{
          typelogin:'motype', 
          btnvue:"第二种" 
       }
   },
   methods:{
       changetype(){
         let ths=this;
        //  这是直接一个按钮点击切换界面
        //  return ths.typelogin = ths.typelogin === 'motype' ? '' : 'motype'
        // 进行切换的时候 按钮的字体也变化,注意判断里面可以用严格等于号，，但是执行的内容不能出现这个
        if(ths.typelogin === 'motype'){
             ths.btnvue="第一种";
             ths.typelogin =''
        } else{
             ths.btnvue="第二种";
             ths.typelogin ='motype'
        }

       }
   }
}
</script>

<style>
.login-box{
    margin-top:100px;
}
.login{
    width:400px;
    padding:20px;
    height:400px;
    margin:0 auto;
    border:1px solid red;
    text-align: center;
}
.form-box{
     height:160px;
     line-height:160px;
}
.com-btn{
     width:108px;
     height:38px;
     line-height:38px;
     border:1px solid red;
     border-radius:4px;
     background: #ee5054;
     color:#ffffff;
     cursor: pointer;
}

</style>

最简单的切换方式：行内表达式

<div style="margin-top:20px;">
          <button @click="show = !show">点击进行切换按钮</button>
          <template v-if="show">
             <span>内容开始进行展示你你你你你你你</span>
          </template>
          <template v-else>
             <span>第二个内容开始进行展示么么么么么么</span>
          </template>
      </div>

在data进行属性的定义：

   data(){
        return {
            show:true,
        }
    }

这样就最简单的实现来回切换的功能。