小程序的数据绑定
时间:2020-03-26
本文章向大家介绍小程序的数据绑定,主要包括小程序的数据绑定使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
小程序的数据绑定
小程序的页面是数据的绑定,在页面js文件中的data中定义的数据,可以在wxml中利用{{ }}
符号引用
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
msg: 'owen is DSB',
name:"tank",
num :12,
num1:1,
flag:false,
name_list:[{"name":"jason",love:"piao"},{name:"tank",love:"own"},{name:"egon",love:"洗脚"}],
tank:{name:"tank",love:"own"},
color:"blue"
},
})
页面的.wxml文件和html性质一样
1页面引用js的数据是用{{}},也可以用作属性值
<view id="item-{{msg}}">ttt {{ msg }}</view> // view标签类似div标签
<view>my age {{num}}</view>
2 如果都是字符串,{{name + msg}},就是拼接
<view>{{name + msg}}</view>
3 如果一个是字符串一个是数字也是拼接
<view>{{name + num}}</view>
<view>{{num1 + num}}</view>
4 就想做加法运算就分开写
<view>{{num1}} + {{num}}</view>
5 在页面中如果属性想表达布尔值,一定要加{{}},当然也可以直接使用变量{{布尔值变量}}
<checkbox checked = "{{false}}"></checkbox>
<checkbox checked = "{{flag}}"></checkbox>
<view wx:if = "{{num>11}}">
sean is sb
</view>
6 循环默认是用index -> 取键,item -> 取值,
用wx:for-index --> 来修改取键的index
用wx:for-item --> 来修改取值的item
一般都要加上wx:key ="index"来提高遍历的速度
如果只想输出内容没不想要包裹的标签,用<block>标签做承载标签
<view wx:for="{{name_list}}" wx:key ="index">
{{index}} ****{{item.name}} %%%%{{item.love}}
</view>
<view wx:for = "{{name_list}}" wx:for-index="k" wx:for-item = "v" wx:key ="index1">
{{k}} :{{v.name}} ->{{v.love}}
</view>
<block wx:for = "{{name_list}}" wx:for-index="k" wx:for-item = "v" wx:key ="index1">
{{k}} :{{v.name}} ->{{v.love}}</block>
小程序的wxss文件
标签那个和原生的html一样都有class和id,我们的样式写在wxss文件,和普通的css没有区别,只是用rpx来代替px。(1rpx = 0.5px)
.wxml
文件
<view class="cls"></view>
#行内样式写法与原生的没有区别,可以调用变量来做属性值
<view style="color:{{color}}">asdas</view>
.wxss
文件
.cls{
width: 400rpx;
height: 400rpx;
background-color:
}
小程序的官方组件
https://developers.weixin.qq.com/miniprogram/dev/component/view.html
原文地址:https://www.cnblogs.com/cnhyk/p/12572454.html
- 【学术】马尔可夫链的详细介绍及其工作原理
- 想把自拍背景改成马尔代夫?手把手教你用深度学习分分钟做到
- 还记得谷歌之前发现的两颗行星吗?今天谷歌对此披露了重要技术细节
- Golang调用动态库so
- 30多条mysql数据库优化方法,千万级数据库记录查询轻松解决
- 【学术】谷歌AI课程附带的机器学习术语整理(超详细!)
- 真疯了!Java 9 还没会用,Java 10 就要来了!
- 关于 Go 中 Map 类型和 Slice 类型的传递
- Go语言与面向对象编程
- 【Golang语言社区】四川麻将随机初始化牌型结构
- 所历前端“姿势”更替记(其一)
- Windows下效率必备软件
- 抽奖问题分析
- Win下必备神器之Cmder
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- sqlmap手册
- Android绘制动态折线图
- Python PIL库图片灰化处理
- django 实现简单的插入视频
- 快速解决Django关闭Debug模式无法加载media图片与static静态文件
- Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
- Django media static外部访问Django中的图片设置教程
- Python图片处理模块PIL操作方法(pillow)
- Android自定义View实现圆环带数字百分比进度条
- Python按照list dict key进行排序过程解析
- Java并发编程的艺术(一)
- Python3.7 读取音频根据文件名生成脚本的代码
- python如何判断IP地址合法性
- 从*Application.java解读SpringBoot
- django实现后台显示媒体文件