w3h5

微信小程序,input输入内容双向绑定

小程序如何实现input输入内容,实时改变标题内容。

小程序的 input 组件有一个 bindinput 属性。

官方的介绍如下:

键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。

首先给标题绑定一个变量,给input绑定一个 bindinput 事件,WXML代码如下:

<view class='ad-preview-comment'>{{adTitle}}</view>
<input placeholder='一句话介绍你的广告' bindinput="adInputChange" value=''></input>

JS部分:input输入内容改变,将 input 的值 e.detail.value 赋给变量 adTitle

Page({
  data: {
    adTitle: '广告描述',
  },
  adInputChange: function(e) {
    let that = this;
    if (e.detail.value.length < 1) {
      that.setData({
        adTitle: '广告描述',
      })
    } else {
      that.setData({
        adTitle: e.detail.value,
      })
    }
  },
})

这样就可以 input 输入内容,标题跟着实时变化了。

微信截图_20181108224302.png 微信小程序,input输入内容双向绑定 小程序

赞 (14)
分享到: +More |

评论 沙发

换个身份