微信小程序

1、input标签

小程序的input标签新增了可以改变placeholder样式的属性

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" placeholder-class=""/>
</view>
.about-page{
  padding: 20rpx;
}
input{
  border: 2rpx solid #ccc;
}

一、表单绑定

1、数据绑定

（1）格式：value="{{变量}}"

（2）区别：小程序与vue的数据绑定

①小程序使用【mustache语法】绑定表单标签的value，数据流向【变量=》标签】

②vue是v-model双向数据绑定方式，数据流向【变量=》标签】及【标签=》变量】

（3）使用：

about.wxml

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{account}}"/>
</view>
about.js 

data: {
  account:'默认',
},

（4）注意：

小程序value的属性值绑定要加插值符号{{}}

2、输入获取

（1）格式：bindinput="事件"

（2）使用：

about.wxml

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{account}}" bindinput="onValue"/>
</view>
about.js

data: {
  account:'默认',
},
onValue(e){
  console.log(e.detail.value);
},

（3）注意：

①直接赋值，虽然可以在终端实时输出改变数据，但是无法将实时数据显示到页面上

about.wxml

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{account}}" bindinput="onValue"/>
  输入框当前值：{{account}}
</view>
about.js

data: {
  account:'默认',
},
onValue(e){
  console.log(e.detail.value);
  this.data.account = e.detail.value
  console.log(this.data.account);
},


②小程序正确修改数据要放在this.setData({})中

onValue(e){
  console.log(e.detail.value);
  this.setData({
    account:e.detail.value
  })
  console.log(this.data.account);
},

（4）数据在对象内时

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{userInfo.username}}" bindinput="onValue"/>
  输入框当前值：{{userInfo.username}}
</view>
data: {
  userInfo:{
    username:'',
    password:''
  }
},
onValue(e){
  this.setData({
    ['userInfo.username']:e.detail.value
  })
},

（5）通用绑定封装

about.wxml

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{userInfo.username}}" bindinput="getValueInput" data-target="userInfo" data-key="username"/>
  当前账号：{{userInfo.username}}
  <input type="text" placeholder="请输入密码" placeholder-style="color:red" value="{{userInfo.password}}" bindinput="getValueInput" data-target="userInfo" data-key="password"/>
  当前密码：{{userInfo.password}}
</view>
about.js

data: {
  account:'默认',
  userInfo:{
    username:'',
    password:''
  }
},
getValueInput(e){
  console.log(e);
  // 解构赋值
  const {target,key} = e.currentTarget.dataset
  this.setData({
    [`${target}.${key}`]:e.detail.value
  })
},