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(){
return {
show:true,
}
}