小程序数据绑定

最新推荐文章于 2024-07-17 17:43:23 发布

有所执着

最新推荐文章于 2024-07-17 17:43:23 发布

阅读量933

点赞数

本文链接：https://blog.csdn.net/lljxk2008/article/details/81096589

版权

本文介绍了小程序中数据绑定的概念，讲解了如何将JavaScript中的数据绑定到WXML页面上，通过{{}}表达式进行数据展示，并利用wx:if、wx:else、block标签进行条件控制。还探讨了数据绑定中的对象使用、简单的运算和判断操作，以及如何通过临时修改AppData区的数据进行快速调试。此外，文章提到了小程序的渲染层与逻辑层的分离，渲染层在webView进程中运行，每个页面都有独立的webViewId，而逻辑层运行在jsCore进程中。

摘要由CSDN通过智能技术生成

小程序的数据绑定是指将页面中要使用的数据, 从js中读取过来, 即将js中的数据绑定到页面中

在.js文件中定义些数据, 比如:

mo, userid, showInfo等

Page({
  data: {
    mo: 'Hello World!!',
    userid : '123214',
    userInfo: {},
    hasUserInfo: false,
    showInfo: true,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

在小程序中页面的显示内容是.wxml文件的数据, 使用{ {}} 获取 js的data中对应的数据

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto" id="user_{
  {userid}}">{
  {mo}}</text>
  </view>

  <view wx:if="{
  {showInfo}}">显示A</view>
  <view wx:else>显示B</view>

  <block wx:if="{