用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

小程序 input 數據雙向綁定,實現方法之一

Rolan 2019-10-17 00:34

小程序 input 數據雙向綁定,實現方法之一我們都知道 vue 中可以使用 modal 來實現 input 內容數據的雙向綁定。小程序好像沒有提供相應的方法支持,就需要我們自己寫了。原理很簡單,在input上先綁定需要取值的變量 ...

小程序 input 數據雙向綁定,實現方法之一

我們都知道 vue 中可以使用 modal 來實現 input 內容數據的雙向綁定。

小程序好像沒有提供相應的方法支持,就需要我們自己寫了。

原理

很簡單,在 input 上先綁定需要取值的變量,如這個變量名是 name,然后再定義一個用于指向變量名的屬性 data-modal 這個屬性值設置為 name,在 input 的綁定方法中將這個屬性值取出,就會知道這個 input 綁定了哪個變量,然后再將 input 的當前值賦給這個變量即可。

實現

wxml

<input id='name' 
    name="name"
    type='text' 
    value='{{name}}'  <!-- input 從 js 中的 data.name 取值 -->
    data-modal='name'  <!-- 這里通過 data-xx 的形式傳遞一個需要綁定的變量名,之后可以通過 event.dataset.xxx 輕松取到 -->
    bindinput='handleInputChange' <!-- 這里綁定 input 內容變化時的處理方法 -->
    >
</input>

wxs

Page({
  data: {
    name: String
  },
  handleInputChange: function(e){
      // 取出定義的變量名
    let targetData = e.currentTarget.dataset.modal; 

    // 取出定義的變量名
    let currentValue = e.detail.value;  
    
    // 將 input 值賦值給 定義的變量名,this.name 可以直接取到在 data 中定義的 name 值,其效果跟 this[變量名] 是對等的,這是 js 基礎
    this[targetData] = currentValue;  
    
  }
}

效果如下圖:

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: KyleBing 來自: segmentfault
不朽的浪漫援彩金
山西十一选五遗漏号 免费模拟炒股软件排名 850游戏下载官方网站 广西快乐双彩彩宝网 美国对中国排球比分 极速赛车最保险投注技巧 北京麻将机维修 庆快乐十分钟开奖记 新湖北十一选五开奖 球探足球比分app下载历史版本 股票配资网站·x首选配资658 网上赚钱论坛 申城棋牌欢乐三打一 陕西快乐十分经验 浙江20选5开奖走势图查询今天 透透网即时比分