小程序实现文本框的双向数据绑定和点击按钮控制其他元素的显示隐藏

小程序实现文本框的双向数据绑定和点击按钮控制其他元素的显示隐藏

文章目录

• 一、小程序实现文本框的双向数据绑定
• 二、点击按钮控制其他元素的显示隐藏

---

话不多说直接上代码

一、小程序实现文本框的双向数据绑定

WXML部分：

<button bindtap="qwe">点击消失(显示)</button>
<view class="container" hidden="{{www}}"></view>

 js部分：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    www: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  qwe(e) {
    console.log(e, "dwq");
    this.setData({
      www: !this.data.www
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

wxss部分:

.container{
  width: 400rpx;
  background-color: aqua;
}

效果：

二、点击按钮控制其他元素的显示隐藏

WXML部分：

带动的值是{{sss}}
<view>
<input type="text" bindinput="zxc" value="{{sss}}"  placeholder="请输入值"/>
</view>

 js部分：

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    sss: "123"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  zxc(ppp) {
    console.log(ppp);
    this.setData({
      sss :ppp.detail.value
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

效果：