小程序数据绑定和setData
2024-08-27 05:52:14
我们wxml没有直接调用数据的能力,我们的逻辑是通过js调用数据,再由js传递给wxml才能够显示出来.那么怎么由js传递给wxml?
首先我的js里面有这样一段代码
process: function(){
var date = 'Nov 18 2019';
},
我需要将这个数据显示到wxml里面去。需要数据绑定,那么小程序里面的数据绑定是如何绑定到页面中的?我们只需要在data里面写上这个数据就可以数据绑定了。
js
data: {
date: 'Nov 18 2019'
},
wxml
<text>{{date}}</text>
双花括号是数据绑定的基本语法。data是page里面比较特殊的一个变量,只有在data下面的数据才能够进行一个数据绑定,其他key里面不行。
像小程序里面的这种数据绑定叫做单向数据绑定。就是js里面的变量的值变了,wxml会自动的变。但是如果wxml的数据变了,data里面的数据是不会自动的更新的。需要手动的设置
我们从服务器取数据一般是写在onLoad里面,我们模拟一段
onLoad: function (options) {
var post_content = {
date: 'Nov 18 2019',
title: '正是虾肥蟹壮时',
post_img: '/images/post/crab.png',
content: '菊黄蟹正肥,品尝秋之味。徐志摩把看初花的荻芦和到楼外楼吃蟹,并列为秋天来杭州不能错过到风雅之事;用林妹妹到话讲时“螯封嫩玉双双满',
view_num: '112',
collect_num: '96',
author_img: '/images/avatar/1.png'
}
this.setData(post_content);
},
这样设置好之后,页面就可以拿到数据了,setData的作用简单的来说就是拷贝到data里面去。
<view class='post-container'>
<view class='post-author-date'>
<image src='{{author_img}}'></image>
<text>{{date}}</text>
</view>
<text class='post-title'>{{title}}</text>
<image class='post-image' src='{{post_img}}'></image>
<text class='post-content'>{{content}}</text>
<view class='post-like'>
<image class='post-like-image' src='/images/icon/chat.png'></image>
<text class='post-like-font'>{{collect_num}}</text>
<image class='post-like-image' src='/images/icon/view.png'></image>
<text class='post-like-font'>{{view_num}}</text>
</view>
</view>
*:如果数据是绑定在属性里面的,不能把引号去掉,一定要把引号写上。如果去掉会直接报错。
最新文章
- Sensitive directory/file Integrity Monitoring and Checking
- ZeroMQ接口函数之 :zmq_null - 无安全和加密
- ios NSString 转 float的注意
- BooleanToVisibilityConverter.cs
- spring整合hibernate配置文件
- ACdrea 1217---Cracking&#39; RSA(高斯消元)
- [transferred] javascript exception handling.
- linux中压缩与解压缩命令小结
- spring源码解析(一)---占位符解析替换
- 关于增强for循环
- Java之多线程断点下载的实现
- css.day04.eg
- VC ++ 后台消息模拟
- 【BASH】自己主动清理rman脚本备份文件
- Java 第八周总结
- Error:Execution failed for task &#39;:app:mergeDebugResources&#39;. >; Crunching Cruncher ******.9.png
- subing用法
- 前端es6基础语法
- Java并发程序设计(十三)锁的性能优化
- python-flask基础