01-2 比较数值大小

01-2案例：比较数值大小

效果如图：

分析页面组成和页面样式

可得知能够细分为如下结构：

• view1和view2代码相同：

​ wxml主要部件：text、input

​ wxss主要部件：border-bottom

• button按钮

​ wxss主要部件：background-color

​ (或者导入外样式@import “xx.wxss”)

• view3

​ wxml主要部件：text

代码如下：

<!--index.wxml-->

<view class="container">
    <!-- view1/2 -->
    <view>   
        <text>请输入第1个数字：</text>   
        <input type="number"/> 
    </view> 
    <view>   
        <text>请输入第2个数字：</text>   
        <input type="number"/> 
    </view> 
    <!-- button -->
    <button>比较</button> 
    <!-- view3 -->
    <view>   
        <text>比较结果：</text>
    </view>

</view>

/*index.wxss*/

view{
    margin : 60rpx
}
input{
    border-bottom: 3rpx solid rgb(255, 168, 168);
    width: 600rpx;
    margin-top: 20rpx;
}
button{
    margin: 60rpx;
    background-color: rgba(114, 111, 207, 0.555);
}

/* 外部样式导入 
	@import "t.wxss"
*/
/* 
    页面内样式：写在当前页面，只对此页面有影响
    外部样式：需单独定义一个文件且要在wxss里进行导入
    全局样式：app.wxss文件中，所有页面共享此样式
	（就近原则）
*/

//index.JSON
{
    "navigationBarTitleText": "数值比较",
    "navigationBarBackgroundColor": "#00F"
}

<页面基础完成>

功能完善(5种方法)

• button

​ 注册点击事件：bindtap

​ （可在js里写入compare()函数查看按钮是否被点击）

<button bindtap="compare">比较</button>

• e.target.id：获取子元素id [获取的是当前点击标签对象的id]

  e.currentTarget.id：获取父元素id

  • target：触发事件的源组件（本身）

  • currentTarge：事件绑定的当前组件（父）

1.绑定不同事件

实现思路：输入不同的数据触发改变事件，使用改变事件获取到用户输入值的两个值，之后点击比较按钮比较2个值bindchange 改变事件，输入框失去焦点就会触发事件函数

<!--.wxml-->
<view>
    <text>请输入第1个数字：</text>
    <input type="number" bindchange="num1Change"/>
</view>
<view>
    <text>请输入第2个数字：</text>
    <input type="number" bindchange="num2Change"/>
</view>
<button bindtap="compare">比较</button>
<view>
    <text>比较结果：{{result}}</text>
    <!--{{result}}是一个表达式，用于获取js文件中data属性里面的数据进行绑定展现-->
</view>

//.js
Page({
    data: {
        result:"" // 用于存储比较结果
    },
    num1:0, // 保存第1个数
    num2:0, // 保存第2个数
    ...,

    compare(){
    var str = "两数相等"
    if(this.num1 > this.num2){
        str = "第1个数大"
    }else if(this.num1 < this.num2){
        str = "第2个数大"
    }
    this.setData({
        result: str
    })
},

    num1change(e){
        this.num1 = Number(e.detail.value)
    },
        num2change(e){
            this.num2 = Number(e.detail.value)
        },
})

2.通过id获取元素方式

实现思路：通过定义id获取数据

<!--.wxml-->
<view>
    <text>请输入第1个数字：</text>
    <input type="number" bindchange="change" id="num1"/>
</view>
<view>
    <text>请输入第2个数字：</text>
    <input type="number" bindchange="change" id="num2"/>
</view>

//.js 
change(e){
    this[e.target.id] = e.detail.value
  },

3.通过dataset获取元素方式

实现思路：修改id为data-id属性，事件名修改为change2

<view>
    <text>请输入第1个数字：</text>
    <input type="number" bindchange="change2" data-id="num1"/>
</view>
<view>
    <text>请输入第2个数字：</text>
    <input type="number" bindchange="change2" data-id="num2"/>
</view>

change2(e){
	this[e.target.dataset.id] = e.detail.value
  }

4.if条件渲染

实现思路：通过渲染的方式比较大小

<view>
    <text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
    <text wx:elif="{{num1 < num2}}">比较结果：第2个数大</text>
    <text wx:else>比较结果：两数相等</text>
</view>

data: {
    result:"", // 用于存储比较结果
    num1:0, // 保存第1个数（新增）
    num2:0, // 保存第2个数（新增）
},
  	num1:0, // 保存第1个数
    num2:0, // 保存第2个数
  
  change3(e){
    var data={}
    data[e.target.dataset.id] = Number(e.detail.value)
    this.setData(data)
  }

5.表单获取值

实验思路：通过表单获取input组件的值，比较结果

<form bindsubmit="formCompare">
    <view>
        <text>请输入第1个数字：</text>
        <input type="number" bindchange="change3" data-id="num1" name="num1"/>
    </view>
    <view>
        <text>请输入第2个数字：</text>
        <input type="number" bindchange="change3" data-id="num2" name="num2"/>
    </view>
    <button bindtap="compare" form-type="submit">比较</button>
</form>
<view>
    <text>比较结果：{{result}}</text>
</view>

formCompare(e){
    var str = "两数相等"
    if(e.detail.value.num1 > e.detail.value.num2){
        str = "第1个数大"
    }else if(e.detail.value.num1 < e.detail.value.num2){
        str = "第2个数大"
    }
    this.setData({
        result: str
    })
}

（–END–)