zoukankan      html  css  js  c++  java
  • 小程序数据绑定与事件绑定

    1.如何定义页面数据。

    小程序中每个页面,又四个部分,其中js文件内可以定义页面的数据,生命周期函数,其他业务逻辑。

    如果要在.js文件内定义页面的数据,只需把数据定义到data节点下即可。

    Page({
        data:{
        msg:'hello word'
        }
    })    
    

    2.数据绑定:

    把data中的数据绑定到页面中渲染,使用双大括号,将变量包起来即可。

    语法格式为:

    <view>{{msg}} </view>

    双大括号语法的主要应用场景:绑定内容,绑定属性,运算(三元表达式,算数运算,逻辑判断,字符串运算,数据路径运算)

    3.属性绑定:

    <view id="item-{{id}}" ></view>
    
    Page({
        data:{
         id:"23423424" 
      }
    })
    

    4.运算:

    <view>{{ flag ? "1" :"0" }}</view>
    

    事件绑定:

    事件是视图层到逻辑层的通讯方式。

    事件可以将用户的行为反馈到逻辑层进行处理。

    事件可以绑定在组件上,当组件书法事件,就会执行逻辑层中对应的事件处理函数。

    bindtap绑定触摸事件:

    bindtap:触摸事件

    在小程序中,不存在网页中的click鼠标点击事件,而是通过bindtap事件来响应触摸行为。

    1.通过bindtap, 可以为组件绑定触摸事件,语法如下:

    <view bindtap="tapName">Click Me!</view>
    

    2.在相应的Page定义中写上相应的事件处理函数,事件参数是event

    Page({
       tapName: function (event) {
          console.log(event)
      } 
    })
    

    bindinput : 文本框输入事件

    在小程序中,通过input 事件来响应文本框的输入事件。

    1.通过bindinput,可以为文本框绑定输入事件,语法如下:

    <input bindinput="inputName"></input>
    

    2.在相应的Page定义中写上相应的事件处理函数,事件参数是event

    Page({
       inputName: function (event) {
          console.log(event)
      } 
    })
    

    data和文本框之间数据同步:(有点像React的操作方法)

    在vue中通过v-model 可以很方便的将数据双向绑定。而在微信中并没有这样的数据双向绑定,要想使数据双向绑定,需要手动的通过文本框的输入事件绑定到data中。

    绑定方法:

    1.监听文本框的数据变化

    在文本框的input事件处理函数中,通过事件参数event,能够访问到文本框的最新值。

    语法: event.detail.value

    示例代码:

    inputName: function (event) {
        //  获取到文本框中的最新数据 
        console.log(event.detail.value)
    }
    

     2.修改data中的数据

    通过this.setData(dataObject) 方法,可以给页面中的data数据重新赋值。

    例如:例如监听文本框的数据变化,并把最新的值复制给data中的msg

    inputName: function (event) {
        this.setData({
            msg: event.detail.value
        })
    }
    

    事件传参:

    1.不能在绑定事件的同时传递参数

    小程序的事件传参比较特殊,不能在为组件绑定事件函数的同时为事件处理函数传递参数。

    例如: 下面的代码将不能正常工作:

    <button bindtap="btnHandler(123)">按钮</button>
    

    因为小程序会把bindtap 后面指定的值,统一当作事件名称来处理。

    2.通过data-*自定义属性传参:

    如果要在组件触发事件处理函数的时候,传递参数,可以为组件提供data- 自定义属性传参。

    示例代码:

    <button bindtap="btnHandle" data-info ="hello word" >按钮</button>
    

     其中,info 会被当作参数名,数值123 会被当作参数值。

    3. 获取data-* 自定义属性中传递的参数

    通过事件参数event.target.dataset.参数名,能够获取data-*  自定义属性传递到事件处理函数中的参数。

    示例代码:

    btnHandle: function (evnet) {
        console.log(event.target.dataset.info)
    }
    
  • 相关阅读:
    yii 面包屑
    php == ===
    算法竞赛入门经典 暴力求解法 简单枚举 7.1.4 双基回文数
    算法竞赛入门经典 暴力求解法 简单枚举 7.1.4 双基回文数
    算法竞赛入门经典 暴力求解法 简单枚举 7.1.4 双基回文数
    算法竞赛入门经典 暴力求解法 简单枚举 7.1.4 双基回文数
    折半(对半)搜索算法
    折半(对半)搜索算法
    折半(对半)搜索算法
    折半(对半)搜索算法
  • 原文地址:https://www.cnblogs.com/liea/p/11801796.html
Copyright © 2011-2022 走看看