微信小程序 （七）数据绑定详细介绍

数据绑定有一部分前几个看着还行，后面的几个可能有几个不理解，界面展示的数据有的也因为条件没法显示。看不懂的可以先记着，后面真正用到时就会明白，反正我是这样想的。这里先记录下

data.wxml

<!--数据绑定使用对象---内容-->
<view>{{message}}</view>
<!--数据绑定使用对象---组件属性---需要在双引号之内-->
<view id="item-{{id}}">组件属性</view>
<!--数据绑定使用对象---控制属性---需要在双引号之内-->
<view wx:if="{{condition}}">控制属性</view>
<!--数据绑定使用对象---三元运算-->
<view hindden="{{flag ? true : false}}">三元运算符</view>
<!--数据绑定使用对象---算数运算-->
<view>我是运算结果---{{a + b}} + {{c}} + d</view>
<!--数据绑定使用对象---逻辑判断-->
<view wx:if="{{length > 5}}">asdf</view>
<!--数据绑定使用对象---字符串运算-->
<view>{{"Hello " + name}}</view>
<!--数据绑定使用对象---数组组合-->
<view wx:for="{{[zero, 1, 2, 3, 4, 5, 6]}}">{{item}}</view>
<!--数据绑定使用对象---对象-->
<template is="objectCombine" data="{{for: x, bar: y}}"></template>
<!--数据绑定使用对象---扩展运算符对象 ... 将一个对象展开-->
<template is="objectCombine" data="{{...obj1, ...obj2, p: 5}}"></template>
<!--数据绑定使用对象---对象的key和value相同时-->
<template is="objectCombine" data="{{foo, bar}}"></template>

data.js

Page({
data:{
//内容绑定
message: 'Hello WeApp',
//组件属性绑定
id: 0,
//控制属性绑定
condition: true,
//三元运算
flag:false,
//算数运算
a: 1,
b: 2,
c: 3,
//逻辑判断
length: 6,
//字符串运算
name: '顺子',
//数组组合
zero: 0,
//对象
x: 0,
y: 1,
//对象展开
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
},
p: 5,
//对象key和value形同时
foo: 'my-foo',
bar: 'my-bar'
},
})

相关文章：

hello WeApp                      icon组件
Window                             text组件                                switch组件
tabBar底部导航                 progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期                    checkbox组件                       toast组件
模块化详                           form组件详                            loading 组件
数据绑定                           input 组件                             navigator 组件
View组件                          picker组件                             audio 组件
scroll-view组件                 radio组件                              video组件
swiper组件                        slider组件                              Image组件

您可能感兴趣的文章:

• 微信小程序之前台循环数据绑定
• 微信小程序 数据绑定详解及实例
• 微信小程序 教程之数据绑定
• 微信小程序 数据绑定及运算的简单实例