綜合運用input元件和多級條件渲染wx:if實現成績等級的判斷

<!--pages/kj/demo114-grade/index.wxml-->
<view class='box'>
  <view class='title'>成績等級計算器</view>
  <view>請輸入你的考試成績</view>
  <input bindblur='scoreInput' placeholder='在此輸入成績' placeholder-style="margin-left: 5px"></input>
  <view wx:if='{{score>100||score<0}}'>成績輸入有誤!</view>
  <view wx:elif='{{score>90}}'>成績等級：優秀</view>
  <view wx:elif='{{score>80}}'>成績等級：良好</view>
  <view wx:elif='{{score>70}}'>成績等級：中等</view>
  <view wx:elif='{{score>60}}'>成績等級：及格</view>
  <view wx:else>成績等級：不及格</view>
</view>

/* pages/kj/demo114-grade/index.wxss */

input {
  margin-top: 20px; /* 上外邊距 */
  margin-bottom: 20px; /* 下外邊距 */
  width: 50%; /* 寬度 */
  height: 80rpx; /* 高度 */
  border: 1px solid silver; /* 邊框線為1px，實線，銀灰色 */
}

// pages/kj/demo114-grade/index.js
Page({
  data: {
    score: 0 //score初始值
  },
  scoreInput: function (e) {
    this.setData({
      score: e.detail.value // 修改score的值為input元件中的輸入值，e是失去焦點事件，事件針對的物件是e.detail，e.detail相當於input元件
    })
  }
})