微信小程序 input 组件设置默认值教程

在微信小程序中，可以使用 <input> 标签来创建输入框，并通过给 value 属性赋值来设置缺省值。以下是示例程序，演示了如何设置输入框的缺省值：

<!-- index.wxml -->
<view class='container'>
  <input class='input' value='{{defaultValue}}' bindinput='inputHandler' />
  <button class='button' bindtap='resetInput'>重置</button>
</view>

// index.js
Page({
  data: {
    defaultValue: '默认值',
  },

  inputHandler: function (e) {
    this.setData({
      defaultValue: e.detail.value,
    });
  },

  resetInput: function () {
    this.setData({
      defaultValue: '',
    });
  },
});

/* index.wxss */
.container {
  margin: 20px;
}

.input {
  border: 1px solid #ccc;
  padding: 10px;
  width: 200px;
}

.button {
  margin-top: 10px;
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
}

在上述示例中，<input> 标签的 value 属性使用了双花括号语法绑定到 defaultValue 变量，从而设置了输入框的缺省值。在 inputHandler 函数中，每次输入内容发生变化时，将最新的输入值更新到 defaultValue 变量中。通过点击“重置”按钮，将 defaultValue 变量重置为空字符串，从而清空输入框的内容。