SOURCE

const ap=new Vue({
  el:'#app', 
	data:{ 
	  message:'v-条件判断',      
      firstName:'Hde',
      score:99,
      isuser:true
	},
    //计算属性()
    computed:{
      result(){
          let showmessage='';
          if(this.score>=90){showmessage='优秀';}
          else if(this.score>=80 & this.score<90){
              showmessage='良好'; }
          else{
          showmessage='良'; }   
              return showmessage;   
    },	
    }
}); 

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app" style="max-width:800px;height:400px">	
	<h2>{{message}}</h2>
	<h2>{{result}}</h2>

   <!--发现原来的input元素不再使用，直接作为else中的input来使用了,
   我们需要保证key的不同-->
   <span v-if="isuser">用户账号 <input placeholder="用户账号" key="d"/></span> 
   <span v-else>用户邮箱 <input placeholder="用户邮箱" key="y"/></span> 
   <button @click="isuser=!isuser">切换类型</button>

</div>