Vue練習

三、練習3:v-model互動

結果:

See the Pen Vue03-v-model互動.0

參考連結:

Vue.js CDN】、【表單html】、【v-if】、【computed

說明:

S1:Html結構貼入

  <div id="app">
    <!-- 加入label 【1°C = 1°C *(9/5)+32 °F】-->



    <div>
      <p class="title">練習1:直接計算</p>
      
  
    </div>
    <div>
      <p class="title">練習3:利用computed Fn</p>
  
      
    </div>
    <div>
      <span class="title">練習2:利用v-if</span>
  
  
    </div>
    <div>
      <span class="title">練習4:利用computed Fn</span>
  
      
    </div>
  </div>

S2:CSS美化貼入

*{
  font-family: Microsoft JhengHei;
  line-height: 20px;
}
.title{color:blue}
div{
  overflow: hidden;
}
div>div{
  border:1px solid #000; border-radius:10px;
  width: 200px; margin: 10px; padding: 10px;
  float:left;
}
div>div:nth-of-type(3){
  clear:both; 
}
label{
  display: block;
}

S3:JS

new Vue({
  el:'#app',
  data:{
    mode_temp:20
  },
  computed:{
    tempC:function(){
      return this.mode_temp*(9/5)+32
    },
    note:function(){
      if(this.mode_temp<25){
        return '太冷了'
      }else if(this.mode_temp>=30){
        return '太熱了'
      }else{
        return '暖和'
      }
    }
  }
});

S4:Html填空

<div id="app">
  <label>
  温度:<input type="text" v-model="mode_temp"> °C
  </label>
  <div>
    <p class="title">練習1:直接計算</p>
    <p>{{mode_temp}}°C = {{mode_temp*(9/5)+32}} °F<p>
  </div>
  <div>
    <p class="title">練習3:利用computed Fn</p>
    <p>{{mode_temp}}°C = {{tempC}} °F</p>
  </div>
  <div>
    <span class="title">練習2:利用v-if</span>
    <p v-if="mode_temp<25">太冷了</p>
    <p v-if="mode_temp>=25&&mode_temp<30">暖和</p>
    <p v-if="mode_temp>=30">太熱了</p>
  </div>
  <div>
    <span class="title">練習4:利用computed Fn</span>
    <p>{{note}}</p>
  </div>
</div>