微信小程序开发初学：框架 - wxml数据绑定

最新推荐文章于 2024-03-31 14:51:54 发布

晚风也很浪漫

最新推荐文章于 2024-03-31 14:51:54 发布

阅读量313

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/Dae_Lzh/article/details/113394819

版权

小程序专栏收录该内容

25 篇文章 12 订阅

订阅专栏

本文详细介绍了WXML中动态数据的来源及其与JS文件中Page的data交互方式。通过示例展示了如何定义和引用字符串、数字、数组及对象类型的变量，并在WXML中展示这些数据。同时，解释了在WXML中引用对象类型数据的正确方法。

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

WXML 中的动态数据均来自对应js文件中 Page 的 data。

语法：将data中的变量用{{ }}包括。

data中不同类型变量定义

字符串类型

变量名 : " 字符串 ",

数字类型

变量名 : 数值 ,

数组类型

变量名 : [ “列表第一项” , “列表第二项” , “列表第三项”] ,
如 List1 : [ “first” , 34 , “third” ] ,

对象类型(与C语言中类的定义相似）

对象名 : { 变量名1 : 变量值1 , 变量名2 : 变量值2 },

data中最后一个变量末尾不加逗号，每两个变量之间必须加逗号。

示例：

Page({
data: {
        school:"XX中学",
        history:50,
        list:[ "学生","老师","保安"],
        obj:{
            name:"xiaohong",
            age:15,
            listo:[ "列表第一项","列表第二项","列表第三项"]
        }
      }
})

data中的变量在wxml中的引用

字符串类型，数字类型变量

<view> {{ 变量名 }} </view>

数组类型

<view> {{ 数组变量名    }} </view>   <!--输出数组全部内容并用逗号分隔-->
<view> {{ 数组变量名[i] }} </view>   <!--输出数组的第i项内容，i从零计数-->

对象类型

<view> {{ 对象名.对象中的变量名 }} </view>
<!--如果只写对象名只会输出[object Object] ，造成错误-->

示例：

<!-- wxml文件 -->

<view>学校名称：{{school}}</view>
<!--引用变量要用双大括号-->
<view>历史年份：{{history}}</view>

<view>里面有{{list}},其中{{list[0]}}有五千人</view>

<view>{{obj.name}} - {{obj.age}} - {{obj.listo[1]}}</view>

/* js文件 */

Page({
    /**
     * 页面的初始数据
     */
    data: {
        school:"XX中学",
        history:50,
        list:[ "学生","老师","保安"],
        obj:{
            name:"xiaohong",
            age:15,
            listo:[ "列表第一项","列表第二项","列表第三项"]
        }
       

    }
})