微信小程序 （七）数据绑定详细介绍
顺子_RTFSC 人气:0
数据绑定有一部分前几个看着还行，后面的几个可能有几个不理解，界面展示的数据有的也因为条件没法显示。看不懂的可以先记着，后面真正用到时就会明白，反正我是这样想的。这里先记录下
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组件
加载全部内容