吆邻友-免费微信小程序平台我要发布会员中心

当前位置:首页 > 微信小程序开发-数据绑定怎么操作?

微信小程序开发-数据绑定怎么操作?

2020-05-30 10:45:30    吆邻友免费小程序开发

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

要完整了解 WXML 语法,请参考WXML 语法参考。

用以下一些简单的例子来看看 WXML 具有什么能力:

数据绑定

<< span="">view>

    {{message}}

<< span="">/view>

/*

page.js

 */

Page({

    data:{

        message:'Hello MINA!'

    }

})

列表渲染

循环,wx:for是一个数组,item变量是一个临时变量,每次循环取得的值都将赋给item。这个变量通常也无法在js文件里找到。下面的例子页面将显示12345

<< span="">view wx:for="{{array}}">

    {{item}}

<< span="">/view>

Page({

    data:{

        array:[1,2,3,4,5]

    }

})

条件渲染

按照条件显示,如果条件成立,那么渲染此控件。有三种 其中elif相当与else if:

<< span="">view wx:if="{{view == 'WEBVIEW'}}">

    WEBVIEW

<< span="">/view>

<< span="">view wx:elif="{{view == 'APP'}}">

    APP

<< span="">/view>

<< span="">view wx:else="{{view == 'MINA'}}">

    MINA

<< span="">/view>

//page.js

Page({

    data:{

        view:'MINA'

    }

})

模板:自定义控件

<< span="">template name="staffName">

    << span="">view>

        FirstName:{{firstName}},LastName:{{lastName}}

    << span="">/view>

<< span="">/template>

<< span="">template is="staffName" data="{{...staffA}}">

<< span="">/template>

<< span="">template is="staffName" data="{{...staffB}}">

<< span="">/template>

<< span="">template is="staffName" data="{{...staffC}}">

<< span="">/template>

Page({

    data:{

        staffA:{

            firstName:'Hulk',

            lastName:'Hu'

        },

        staffB:{

            firstName:'Shang',

            lastName:'You'

        },

        staffC:{

            firstName:'Gideon',

            lastName:'Lin'

        }

    }

})

具体的能力以及使用方式在以下章节查看:

数据绑定、列表渲染、条件渲染、模板、引用


郑重声明:本网站资源、信息来源于网络,完全免费共享,仅供学习和研究使用,版权和著作权归原作者所有,如有不愿意被转载的情况,请通知我们删除已转载的信息。