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

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

data.wxml

{{message}}

<view id="item-{{id}}">组件属性

<view wx:if="{{condition}}">控制属性

<view hindden="{{flag ? true : false}}">三元运算符

我是运算结果---{{a + b}} + {{c}} + d

<view wx:if="{{length > 5}}">asdf

{{"Hello " + name}}

<view wx:for="{{[zero,1,2,3,4,5,6]}}">{{item}}

<template is="objectCombine" data="{{for: x,bar: y}}">

<template is="objectCombine" data="{{...obj1,...obj2,p: 5}}">

<template is="objectCombine" data="{{foo,bar}}">

data.js

//内容绑定
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'

},})

相关文章

小程序用什么css框架
概述 消息能力是小程序能力中的重要组成,我们为开发者提供了...
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.mini...
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-...
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法...
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器:...