微信小程序input框实现双向绑定

先上效果图

功能 : 当输入框的值为空时，清空功能图标隐藏，

当输入框有值时，清空功能图标显现。

1. 获取输入框中的值,判断值是否为空来控制清空图标的显示

给input绑定一个bindinput事件(当键盘输入时就会触发)

<icon type="clear"  bindtap="clearValue" hidde="{{hiddenFlag}}">
<input type="text" value="{{inputValue}}" bindinput="isHidden"></input>

通过绑定的isHidden函数事件e来获取

data{
    inputValue:undifined,
    hiddenFlag:true,
}
isHidden:function(e){
    this.setData({                  //把输入框的值存储(绑定)到变量inputValue中
        inputValue:e.detail.value,
    });
    if(this.data.inputValue.length!=0){//当字符串的长度不为零时，说明输入框有值
        this.setData({
            hiddenFlag:false,
        })
    }
    else{
        this.setData({
            hiddenFlag:true,
        })
    }
}

2.清空输入框的值

点击清空图标时触发clearValue函数

clearValue:function(){
    this.setData({
        inputValue:"",
    })
}

3.一个小BUG

当你点击icon图标时会发现触发不了clearValue函数，那是因为层级关系， input在icon上面,导致点击无效。

将icon的z-index设置成大于input的即可。

<style>
    icon{
        position:absolute;
        z-index:2;
    }
</style>