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

前端之家收集整理的这篇文章主要介绍了微信小程序 (七)数据绑定详细介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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'

},})

文章:

原文链接:https://www.f2er.com/weapp/45544.html

猜你在找的微信小程序相关文章