wxml 判断 小程序_微信小程序wxml数据绑定总结
今天系统的记录一下wxml的数据绑定功能。吐舌头
首先给出要用到的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.简单绑定,用双花括号引用变量 简单绑定 {{message}} {{messageNew.time}}
并在js的data中赋值↓,如message中可以直接引用,time在messageNew中赋值,引用时用.间隔,messageNew.time为数据路径。
Page({
/**
* 页面的初始数据
*/
data: {
message: "简单绑定的字符串",
messageNew:{
time:"2017-10-17"
},
}
})
效果图↓
2.用工具查看属性,将view的id值赋为item-{{id}}
class="topic-group">组件属性
id="item-{{id}}" class="topic-item">通过工具查看属性
在js对id进行赋值
id: 1,
查看属性↓,点击Wxml工具,将鼠标移到左侧view上并点击,对应属性内容标蓝,可以看到,该view的id值为item-1。
3.控制属性
class="topic-group">控制属性
bindtap="switchCondition">切换condition(Click on me)
wx:if="{{condition}}" class="topic-item">condition为true会显示
js中我们首先将condition赋值true,并在js中实现方法
switchCondition: function () {
var condition = this.data.condition;
this.setData({
condition: !condition
})
}
看下效果图,每次点击“切换condition”条目,condition值都取反,影响view的展示↓
4.三元运算
class="topic-group">三元运算
hidden="{{flag==1?true:false}}" class="topic-item">flag={{flag}}
①我们在js中将flag赋值为5,显示如下↓(因为flag不为1,因此hidden为false,即不隐藏)
②在js中将flag赋值为1,显示如下↓(flag==1,hidden值为true,view被隐藏)
5.算数运算
class="topic-group">算数运算
class="topic-item">{{a+b}}+{{c}}+d
class="topic-item">{{a+b+c}}+{{d}}
同样在js的data中进行赋值↓
a: 1,
b: 2,
c: 3,
d: 4,
效果图如下,花括号包裹的部分可以进行运算,不同花括号之间的数据无法进行运算
6.逻辑运算
class="topic-group">逻辑判断
wx:if="{{length>5}}" class="topic-item">length={{length}}
wx:if="{{arr.length>5}}" class="topic-item">arr.length={{arr.length}}
在js赋值
length:4.5,
arr:[1,2,3,4,5,6],
wxml 判断 小程序_微信小程序wxml数据绑定总结相关推荐
- 微信公众账号后台怎么解除小程序_微信小程序解除绑定 微信小程序怎么授权...
该如何注销小程序? 微信小程序目前无法取消,也是微信小程序最脆弱.最无助的地方.如果你确定你不想要这个小程序,你可以转移和改变主题和其中的所有信息,这样你的小程序就会变成别人的小程序,与你无关.相当于 ...
- 简单分享怎么开发自己的微信小程序_微信小程序快速制作步骤
小程序开发除了专业人士会自己开发之外,就是外包开发和模板搭建这两种方法. 外包小程序开发需要持续不断地与外包团队沟通,投入的精力也不少,总体价格不低,基本在万元左右, 最适合新手的还是小程序模板搭建啦 ...
- wxml 判断 小程序_微信小程序(一)WXML模板
WXML模板 本节学习目标 (1)了解wxml的基本概况和设计理念 (2) 掌握wxml语言的各种常用语法 (一)wxml是什么 wxml 是微信小程序团队设计的一套标签语言,可以构造出页面的结构,类 ...
- wxml报错原因_微信小程序开发教程(八)视图层——.wxml详解
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...
- php mysql特殊符号过滤微信小程序_微信小程序数据过滤(filter)方法
因为微信小程序的wxml和js的内部实现机制是分开编译的.所以在wxml是没办法调用js的函数的.这会导致WXML缺少一个我们常用的功能,那就是没有办法在视图层对数据做一些特殊处理.比如我们从后端获取 ...
- 列表对象转数组 微信小程序_微信小程序——无限递归的层次列表
--上礼拜踩的坑 1.关于为什么不直接操作DOM对象? 因为微信小程序里没有document对象. 2.为什么坑了这多时间? 因为之前看了个过期的帖子,完美避开了解决方案. 下面进入正文,需求是在微信 ...
- object picker 微信小程序_微信小程序 demo分享
选择器示例demo: 1.普通选择器 2.多列选择器 3.时间选择器 4.日期选择器 5.省市区选择器 wxml 普通选择器:(普通数组) 当前选择:{{array[index]}} 普通选择器2:( ...
- input ios问题 小程序_微信小程序开发常见问题汇总
原标题:微信小程序开发常见问题汇总 1.域名必须是https 非https的域名不被微信小程序允许. 2.input组件placeholder字体颜色 卸载placeholder-class里面的co ...
- plsql developer无监听程序_微信小程序支持分享到朋友圈啦!技术解读跟我来
千呼万唤始出来!微信小程序页面分享到朋友圈的功能,终于在安卓系统灰度测试了!目前只在安卓系统!只在安卓系统!只在安卓系统!iOS系统还没有办法体验. 首先,我们看一下官方文档的描述,解读一下小程序分享 ...
- 取景框图片 小程序_微信小程序实现身份证取景框拍摄
本文实例为大家分享了微信小程序实现身份证取景框拍摄的具体代码,供大家参考,具体内容如下 wxml wxss .camera_box { height: 100vh; width: 100vw; pos ...
最新文章
- c语言c2182是什么错误,C语言中一种更优雅的异常处理机制
- Java笔试题之《流行的框架与新技术》
- 二维数组中的一些问题
- 【一张图系列】理解安全上下文
- 桌面计算机密码应由哪项组成,计算机应用能力考试模拟试题
- 病毒行为分析初探(三)
- Spring Boot中使用多数据库
- 【渝粤教育】广东开放大学 Linux操作系统 形成性考核 (55)
- KVM中断虚拟化(二)
- 饿了么前端DEMO 网址 VUE.js
- JavaScript重难点解析3(原型与原型链、执行上下文与执行上下文栈)
- sqlserver编号
- udp数据包大小问题
- iSlide系列教程视频简介——PPT的简化神器
- linux sqlplus dmp文件,sqlplus导入dmp数据库
- PDF编辑器哪个好,如何把PDF文件拆分成多个文件
- Lombok @Data导致的hashCode的问题
- C语言学习日记(9)——用C语言写一个爱心
- EverBox开发笔记-4-如何使用Core Data
- 中国/玩具鸭舰队/漂流15年 今夏将抵英国