1、案例演示：摄氏温度转华氏温度

1.1、代码

wxml

<view class="box">
<view class="title">摄氏温度转华氏温度</view>
    <input type="digit" placeholder="请输入摄氏温度" bindblur="circ"/>
    <view>华氏温度为{{F}}</view>
</view>

wxss

input{
    margin: 20px 0;
    border-bottom: 1px solid blue;
}

js

// pages/dem_2/dem_2.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
    
    },
    circ: function(e){
        var C, F;
        // console.log(e)
        C = e.detail.value;
        this.setData({
            F : C * (9 / 5) + 32
        })
    }
})

1.2、结果

结果.jpg

2、总结

input组件的属性.jpg type属性的合法值.jpg

3、出现bug的地方

3.1、wxss中的input问题：

在wxss当中写渲染的时候input前面是没有“.”的，而且wxss中写的input是可以渲染wxml中所有input的，如果想单独渲染，可以给input外加view，然后通过设置view中的class来设置input属性。

3.2、js中的问题：

在js中写事件（函数）的时候，用到的变量可以在函数中通过关键字“var”声明，同时每行代码后面加“;”,在事件（函数）中设置变量初始值的时候，形式和C语言一样用“=”，但是在this.setData()中设置要用｛变量:值｝,注意其中“值”可以是一个小公式。因为this.setData()中要用放置对象（用键值对表示），还有，js中不论在data中有没有定义变量，在事件（函数）中用到，就需要在事件（函数）中用var重新定义。