微信小程序框架wxml(一)wxml数据绑定
2017-10-17 16:50
671 查看
今天系统的记录一下wxml的数据绑定功能。
首先给出要用到的wxss样式文件
1.简单绑定,用双花括号引用变量
并在js的data中赋值↓,如message中可以直接引用,time在messageNew中赋值,引用时用.间隔,messageNew.time为数据路径。
效果图↓
2.用工具查看属性,将view的id值赋为item-{{id}}
在js对id进行赋值
查看属性↓,点击Wxml工具,将鼠标移到左侧view上并点击,对应属性内容标蓝,可以看到,该view的id值为item-1。
3.控制属性
js中我们首先将condition赋值true,并在js中实现方法
看下效果图,每次点击“切换condition”条目,condition值都取反,影响view的展示↓
4.三元运算
①我们在js中将flag赋值为5,显示如下↓(因为flag不为1,因此hidden为false,即不隐藏)
②在js中将flag赋值为1,显示如下↓(flag==1,hidden值为true,view被隐藏)
5.算数运算
同样在js的data中进行赋值↓
效果图如下,花括号包裹的部分可以进行运算,不同花括号之间的数据无法进行运算
6.逻辑运算
在js赋值
7.字符串运算
8.数据路径计算
9.数组组合
接下来,我们将wxml数组中的zero用引号标注
10.使用对象
自定义一个template,将其命名(须符合命名规范)。在“templateA”中,包含两个text,其引用值分别为templateA1和templateA2,使用该templateA时需要将两个参数赋值。在该demo中,templateA1在wxml在template中赋值为“Amarni405”,templateA2在js中进行赋值
11.对象展开
查看结果↓
注意:同样的变量名,会发生覆盖,修改wxml代码↓,新增小红框部分代码
可以看到Bd值发生了变化↓
12.其他注意事项 花括号与引号之间存在空格,结果发生变化
13.附上完整的wxml文件
完整的js代码
今天就记录到这里,夜晚愉快。
首先给出要用到的wxss样式文件
/* pages/wxml/wxml.wxss */ .wxml-container{ padding: 0 20rpx ; align-items: center; } .topic-group{ background: pink; width: 100%; text-align: center; margin-top: 40rpx; } #text1{ margin-top: 0; } text{ width: 100%; text-align: center; } .topic-item{ font-size: 40rpx; }
1.简单绑定,用双花括号引用变量
<text class="topic-group" id="text1">简单绑定</text> <view class="topic-item">{{message}}</view> <view class="topic-item">{{messageNew.time}}</view>
并在js的data中赋值↓,如message中可以直接引用,time在messageNew中赋值,引用时用.间隔,messageNew.time为数据路径。
Page({ /** * 页面的初始数据 */ data: { message: "简单绑定的字符串", messageNew:{ time:"2017-10-17" }, } })
效果图↓
2.用工具查看属性,将view的id值赋为item-{{id}}
<text class="topic-group">组件属性</text> <view id="item-{{id}}" class="topic-item">通过工具查看属性</view>
在js对id进行赋值
id: 1,
查看属性↓,点击Wxml工具,将鼠标移到左侧view上并点击,对应属性内容标蓝,可以看到,该view的id值为item-1。
3.控制属性
<text class="topic-group">控制属性</text> <text bindtap="switchCondition">切换condition(Click on me)</text> <view wx:if="{{condition}}" class="topic-item">condition为true会显示</view>
js中我们首先将condition赋值true,并在js中实现方法
switchCondition: function () { var condition = this.data.condition; this.setData({ condition: !condition }) }
看下效果图,每次点击“切换condition”条目,condition值都取反,影响view的展示↓
4.三元运算
<text class="topic-group">三元运算</text> <view hidden="{{flag==1?true:false}}" class="topic-item">flag={{flag}}</view>
①我们在js中将flag赋值为5,显示如下↓(因为flag不为1,因此hidden为false,即不隐藏)
②在js中将flag赋值为1,显示如下↓(flag==1,hidden值为true,view被隐藏)
5.算数运算
<text class="topic-group">算数运算</text> <view class="topic-item">{{a+b}}+{{c}}+d</view> <view class="topic-item">{{a+b+c}}+{{d}}</view>
同样在js的data中进行赋值↓
a: 1, b: 2, c: 3, d: 4,
效果图如下,花括号包裹的部分可以进行运算,不同花括号之间的数据无法进行运算
6.逻辑运算
<text class="topic-group">逻辑判断</text> <view wx:if="{{length>5}}" class="topic-item">length={{length}}</view> <view wx:if="{{arr.length>5}}" class="topic-item">arr.length={{arr.length}}</view>
在js赋值
length:4.5, arr:[1,2,3,4,5,6],效果图如下 ↓ length=4.5 不满足大于5的条件 ,因此第一个view不可见;arr.length=6满足大于5的条件,因此第二个view可见,展示arr.length=6.
7.字符串运算
<text class="topic-group">字符串运算</text> <view class="topic-item">{{"hello "+name}}</view> <view class="topic-item">hello {{name}}</view>在js中对name进行赋值↓
name:"Crab",效果图,可以看到两种表达方式的结果一致
8.数据路径计算
<text class="topic-group">数据路径运算</text> <view class="topic-item">{{buff.age}}+{{cow[0]}}+{{cow[1]}}</view>在js的data中加入如下赋值数据↓
buff:{ age:13 }, cow:["Emily","Lisa"],查看结果 (数组中数据用 “数组名[索引]” 方式访问,JSON格式用.分隔路径不同级)
9.数组组合
<text class="topic-group">数组组合</text> <view wx:for="{{[zero,1,2,3,4]}}">{{item}}</view>在js中赋值
zero:0,查看结果,可以看到数组中的zero被js中的值替换。
接下来,我们将wxml数组中的zero用引号标注
<text class="topic-group">数组组合</text> <view wx:for="{{['zero',1,2,3,4]}}">{{item}}</view>查看新的结果,可以看到,数组的首个元素直接为 ‘zero’
10.使用对象
<template name="templateA"> <text>{{templateA1}}</text> <text>{{templateA2}}</text> </template> <text class="topic-group">使用对象</text> <template is="templateA" data="{{templateA1:'Amarni405',templateA2}}"></template>
自定义一个template,将其命名(须符合命名规范)。在“templateA”中,包含两个text,其引用值分别为templateA1和templateA2,使用该templateA时需要将两个参数赋值。在该demo中,templateA1在wxml在template中赋值为“Amarni405”,templateA2在js中进行赋值
templateA2:"dior999",查看结果
11.对象展开
<template name="templateB"> <text>Ba={{Ba}}</text> <text>Bb={{Bb}}</text> <text>Bc={{Bc}}</text> <text>Bd={{Bd}}</text> <text>Be={{Be}}</text> </template> <text class="topic-group">对象展开</text> <template is="templateB" data="{{...obj1,...obj2,Ba:obj1.a,Be:10}}"></template>js中数据赋值如下↓,进行数据展开时,变量名需一一对应(obj1中不含变量Ba,因此需对Ba进行Ba:obj1.a操作,当然也可以将其他值赋给Ba)
obj1:{ a:700, Bb:800, Bc:900 }, obj2:{ Bd:1000 }, Bd:888,
查看结果↓
注意:同样的变量名,会发生覆盖,修改wxml代码↓,新增小红框部分代码
可以看到Bd值发生了变化↓
12.其他注意事项 花括号与引号之间存在空格,结果发生变化
<view wx:for="{{[1,2,3]}} "> {{item}} </view> <view wx:for="{{[1,2,3] + ' '}}"> {{item}} </view>每一个view中都存在5个元素 “1” “,” “2” “,”和“3”(数组元素之间填充逗号)
13.附上完整的wxml文件
<!--pages/wxml/wxml.wxml-->
<view class="container wxml-container">
<text class="topic-group" id="text1">简单绑定</text>
<view class="topic-item">{{message}}</view>
<view class="topic-item">{{messageNew.time}}</view>
<text class="topic-group">组件属性</text>
<view id="item-{{id}}" class="topic-item">通过工具查看属性</view>
<text class="topic-group">控制属性</text>
<text bindtap="switchCondition">切换condition(Click on me)</text>
<view wx:if="{{condition}}" class="topic-item">condition为true会显示</view>
<text class="topic-group">三元运算</text> <view hidden="{{flag==1?true:false}}" class="topic-item">flag={{flag}}</view>
<text class="topic-group">算数运算</text> <view class="topic-item">{{a+b}}+{{c}}+d</view> <view class="topic-item">{{a+b+c}}+{{d}}</view>
<text class="topic-group">逻辑判断</text> <view wx:if="{{length>5}}" class="topic-item">length={{length}}</view> <view wx:if="{{arr.length>5}}" class="topic-item">arr.length={{arr.length}}</view>
<text class="topic-group">字符串运算</text>
<view class="topic-item">{{"hello "+name}}</view>
<view class="topic-item">hello {{name}}</view>
<text class="topic-group">数据路径运算</text>
<view class="topic-item">{{buff.age}}+{{cow[0]}}+{{cow[1]}}</view>
<text class="topic-group">数组组合</text>
<view wx:for="{{['zero',1,2,3,4]}}">{{item}}</view>
<template name="templateA">
<text>{{templateA1}}</text>
<text>{{templateA2}}</text>
</template>
<template name="templateB">
<text>Ba={{Ba}}</text>
<text>Bb={{Bb}}</text>
<text>Bc={{Bc}}</text>
<text>Bd={{Bd}}</text>
<text>Be={{Be}}</text>
</template>
<text class="topic-group">使用对象</text>
<template is="templateA" data="{{templateA1:'Amarni405',templateA2}}"></template>
<text class="topic-group">对象展开</text>
<template is="templateB" data="{{...obj1,...obj2,Ba:obj1.a,Be:10,Bd}}"></template>
<text class="topic-group">条件判断</text>
<text wx:if="{{5>3}}">true</text>
<text wx:else>flase</text>
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}
</view>
</view>
完整的js代码
// pages/wxml/wxml.js
Page({
/**
* 页面的初始数据
*/
data: {
message: "简单绑定的字符串",
messageNew:{
time:"2017-10-17"
},
id: 1,
condition: true,
flag: 5,
a: 1,
b: 2,
c: 3,
d: 4,
length:4.5,
arr:[1,2,3,4,5,6],
name:"Crab",
buff:{
age:13
},
cow:["Emily","Lisa"],
zero:0,
templateA2:"dior999",
obj1:{
a:700,
Bb:800,
Bc:900
},
obj2:{
Bd:1000
},
Bd:888,
lipsticks:["YSL13","Dior999","Armani405"],
lipsticks2:[
{
name:"YSL13",
price:320
}, {
name: "Dior999",
price: 300
}, {
name: "Armani405",
price: 320
},
]
},
switchCondition: function () { var condition = this.data.condition; this.setData({ condition: !condition }) }
})
今天就记录到这里,夜晚愉快。
相关文章推荐
- 【微信小程序笔记-2】框架-视图层-WXML(数据绑定、渲染、引用)
- 微信小程序WXML 数据绑定、列表渲染、条件渲染、模板、事件、引用用法
- 微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定
- 微信小程序开发中数据绑定一个对象到数组中,然后取值的一个注意点
- 微信小程序 动态绑定数据及动态事件处理
- 微信小程序之页面数据绑定及页面跳转传参
- 一个Java XML数据绑定框架的评测
- 微信小程序(一)—— 数据绑定
- 微信小程序框架wxml(六)wxml引用
- 微信小程序 (七)数据绑定详细介绍
- 微信小程序的数据绑定
- 微信小程序脚本数据绑定(三)
- Castor:基于XML的Java开源数据绑定框架(支援JDO)
- 【微信小程序】视图层-数据绑定(算数运算,逻辑判断,数据路径运算等等)
- 微信小程序入门七:数据绑定
- 如何在原生微信小程序中实现数据双向绑定欢迎使用CSDN-markdown编辑器
- 微信小程序学习2.js基本使用之数据绑定
- 微信小程序 数据绑定 条件循环
- 微信小程序开发教程(基础篇)8-数据绑定下
- 微信小程序 教程之数据绑定