首页 > 其他分享 >数据绑定

数据绑定

时间:2024-10-15 10:00:21浏览次数:8  
标签:count 数据 绑定 如下 data Page 页面

(1)数据绑定

页面数据如下

Page({
  data: {
    info:'hello world'
  }
})

页面机构如下

<view>{{info}}</view>

(2)属性值绑定

页面数据如下

Page({
  data: {
     imgSrc:"https://bkimg.cdn.bcebos.com/pic/0eb30f2442a7d9334c218e0fab4bd11372f001c4"
  }
})

页面机构如下

<image src="{{imgSrc}}"></image>

(3)三元运算

页面数据如下

Page({
  data: {
    randomNum:Math.random()*10
  }
})

页面机构如下

<view>{{randomNum>=5 ? '大于等于5' : '小于5'}}</view>

(4)事件绑定

(5)bindtap的语法格式

页面数据如下

Page({
  data: {
   
  },

  btnTapHandler(e){
    console.log(e)
  },

})

页面机构如下

<button type="primary" bindtap="btnTapHandler">触摸事件按钮</button>

 (6)在事件处理函数中为 data 中的数据赋值

页面数据如下

Page({
  data: {
   count:0,
  },

    coountChange(){
    this.setData({
      count:this.data.count+1
    })
  },

})

页面机构如下

<button type="primary" bindtap="coountChange">+1</button>

(7)事件传参

 

页面数据如下

Page({
  data: {
   count:0,
  },

  btnTap2(e){
    this.setData({
      count:this.data.count+e.target.dataset.add
    })
  },

})

页面机构如下

<button type="primary" bindtap="btnTap2" data-add="{{2}}">+2</button>

(8)bindinput的语法

 

页面数据如下

Page({
  data: {
    msg:'你好'
  },

  inputHandler(e){
    //取最新文本框的值
    console.log(e.detail.value)
    this.setData({
      msg:e.detail.value
    })
  },

})

页面机构如下

<input value="{{msg}}" bindinput="inputHandler"></input>

 

标签:count,数据,绑定,如下,data,Page,页面
From: https://www.cnblogs.com/wmqxlt/p/18458102

相关文章

  • SPSS常见数据分析方法比较汇总
    SPSS是全球领先的统计分析与数据挖掘产品,全名:StatisticalProductandServiceSolutions成立于1968年,是世界上应用最广泛的专业统计和数据模型软件之一。目前,SPSS、SAS、Stata一齐被称为三大权威统计软件。一、常用多变量分析技术比较汇总表注: 卡方分析:定量两个定性......
  • 数据解析 - xpath 语法
    1、基础语法(1)/说明:从根节点开始。示例:/html/body(2)//说明:选择匹配的任何位置。示例://input(3).说明:当前节点。(4)..说明:父节点。(5)@说明:选择属性。示例://*[@id="kw"]#表示选择具备id="kw"属性的节点(6)[node]说明:选择所有node子元素。(7)[@attr]说明:选取带有attr属......
  • leecode 数据库: 579. 查询员工的累计薪水
    表:Employee+-------------+------+|ColumnName|Type|+-------------+------+|id|int||month|int||salary|int|+-------------+------+(id,month)是该表的主键(具有唯一值的列的组合)。表中的每一行表示2020年期间员工......
  • 用python、JavaScript、JAVA等多种语言的实例代码演示教你如何免费获取股票数据(实时数
    ​近一两年来,股票量化分析逐渐受到广泛关注。而作为这一领域的初学者,首先需要面对的挑战就是如何获取全面且准确的股票数据。因为无论是实时交易数据、历史交易记录、财务数据还是基本面信息,这些数据都是我们进行量化分析时不可或缺的宝贵资源。我们的核心任务是从这些数据......
  • leecode 数据库: 1164. 指定日期的产品价格
    表:Products+---------------+---------+|ColumnName|Type|+---------------+---------+|product_id|int||new_price|int||change_date|date|+---------------+---------+(product_id,change_date)是此表的主键(具有唯一......
  • 网站数据库为什么错误呢
    网站数据库出现错误可能有多种原因。为了更准确地定位问题并提供解决方案,请提供一些具体的信息,例如错误的具体表现、使用的数据库类型(如MySQL、PostgreSQL等)、错误日志或错误消息等。不过,我可以列出一些常见的数据库错误原因:连接问题:数据库服务器未启动。连接字符串或配......
  • Python中的pool.map函数:高效处理数据与计算任务
    在Python中,map()函数是一个非常实用的工具,它能对序列(如列表、元组等)进行映射操作,将一个函数作用于序列中的每个元素,并将结果组成一个新的序列返回。在一些大规模的数据处理和计算任务中,我们往往需要对大量数据进行高效的处理。这时,map()函数就显得尤为重要,而它的一个实现——pool.......
  • 针对不同类型的数据,哪些Python可视化库更适合处理时间序列数据?
    关注我,持续分享逻辑思维&管理思维&面试题;可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导;推荐专栏《10天学会使用asp.net编程AI大模型》,目前已完成所有内容。一顿烧烤不到的费用,让人能紧跟时代的浪潮。从普通网站,到公众号、小程序,再到AI大模型网站。干货满满。学成后可......
  • 对vue响应式数据的理解(vue基础,面试,源码级讲解)
    首先我们要知道哪些数据可以劫持。  是否可以劫持:在JavaScript等动态语言中,字符串和数字虽然是基本数据类型(也称为原始数据类型),但它们可以包装成对象(如String对象和Number对象)进行处理。当它们被包装成对象后,就可以使用对象的方法,包括Object.defineProperty等方法进行数据......
  • 数据库系统——数学模型
    数学模型前言三级模式两种映射一、基本概念1.概念模型2.逻辑模型3.物理模型二、四个世界三、概念世界和概念模型1.E-R模型(实体-关系模型)2.EE-R模型3.面向对象模型(OO模型)4.谓词模型四、信息世界和逻辑模型关系模型五、计算机世界和物理模型前言三级模式内模式内......