【小程序】input输入框双向绑定简单方法（含多个input，图示+代码）

1、实现用户名和密码的input双向绑定（图）

 2、wxml

主要是这三个选项

 value="{{userName}}" bindchange="inputChange" data-id="userName"

完整代码：

    <view class="title">请使用手机号登录</view>
    <view class="text">
        <input type="text" required="required" placeholder="请输入手机号" placeholder-style="color:rgb(170,170,170);" value="{{userName}}" bindchange="inputChange" data-id="userName">
        </input>
    </view>
    <view class="text">
        <input type="password" required="required"  placeholder="请输入密码" focus="true"
        placeholder-style="color:rgb(170,170,170);" value="{{passWord}}" 
        bindchange="inputChange" data-id="passWord">
        </input>
    </view>

    <view class="title_2" onclick="window.location='RetrievePassword.html'">
        忘记密码
    </view>
    <view class="btn" bindtap="login">
        登　录
    </view>

    <view class="btn_2">
         新用户注册
    </view>

3、js

主要代码：

    data: {
        userName: "13103101099",
        passWord: "8384250"
    },
    login: function () {
        wx.showModal({
            title: '提示',
            content: '手机号：' + this.data.userName+'  密码：'+this.data.passWord,
            success: function (res) {
                if (res.confirm) {
                }
            }
        })
    },
    inputChange: function (e) {
        this.setData({
            [e.target.dataset.id]: e.detail.value
        })
    },

完整代码：

// pages/login/login.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        userName: "13103101099",
        passWord: "8384250"
    },
    login: function () {
        wx.showModal({
            title: '提示',
            content: '手机号：' + this.data.userName+'  密码：'+this.data.passWord,
            success: function (res) {
                if (res.confirm) {
                }
            }
        })
    },
    inputChange: function (e) {
        this.setData({
            [e.target.dataset.id]: e.detail.value
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

4、wxss

    .title {
        height: 70px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        padding-top: 50px;
        letter-spacing: 1px;
        color: rgb(88, 88, 88);
        /* background-color: yellowgreen; */
    }

    .text {
        height: 60px;
        margin: 0 auto;
        display: flex;
        text-align: center;
        justify-content: center;
    }

    .text input {
        border: 1px solid rgb(216, 216, 216);
        width: 94%;
        height: 40px;
        border-radius: 5px;
        font-size: 16px;
        text-align: left;
        color: rgb(15, 15, 15);
        padding-left: 20px;
        box-sizing: border-box;
    }

    .title_2 {
        height: 50px;
        line-height: 30px;
        text-align: right;
        color: rgb(233, 2, 2);
        padding-right: 25px;
    }

    .btn {
        height: 40px;
        width: 94%;
        text-align: center;
        margin: 0 auto;
        background-color:rgb(255,0,0);
        border-radius: 5px;
        font-size: 18px;
        line-height: 40px;
        color:white;
        margin-bottom: 40px;
    }
   
    .btn_2 {
        height: 40px;
        width: 94%;
        text-align: center;
        margin: 0 auto;
        background-color:rgb(255,248,248);
        border-radius: 5px;
        font-size: 17px;
        line-height: 40px;
        color:rgb(240, 36, 36);
        margin-bottom: 25px;
        border:1px rgb(250, 225, 225) solid;
    }



    .title {
        height: 70px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        padding-top: 50px;
        letter-spacing: 1px;
        color: rgb(88, 88, 88);
        /* background-color: yellowgreen; */
    }

    .text {
        height: 60px;
        margin: 0 auto;
        display: flex;
        text-align: center;
        justify-content: center;
    }

    .text input {
        border: 1px solid rgb(216, 216, 216);
        width: 94%;
        height: 40px;
        border-radius: 5px;
        font-size: 16px;
        text-align: left;
        color: rgb(15, 15, 15);
        padding-left: 20px;
        box-sizing: border-box;
    }

    .title_2 {
        height: 50px;
        line-height: 30px;
        text-align: right;
        color: rgb(233, 2, 2);
        padding-right: 25px;
    }

    .btn {
        height: 40px;
        width: 94%;
        text-align: center;
        margin: 0 auto;
        background-color:rgb(255,0,0);
        border-radius: 5px;
        font-size: 18px;
        line-height: 40px;
        color:white;
        margin-bottom: 40px;
    }
   
    .btn_2 {
        height: 40px;
        width: 94%;
        text-align: center;
        margin: 0 auto;
        background-color:rgb(255,248,248);
        border-radius: 5px;
        font-size: 17px;
        line-height: 40px;
        color:rgb(240, 36, 36);
        margin-bottom: 25px;
        border:1px rgb(250, 225, 225) solid;
    }