小程序数据绑定和setData

Posted wzndkj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序数据绑定和setData相关的知识,希望对你有一定的参考价值。

我们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>

 

*:如果数据是绑定在属性里面的,不能把引号去掉,一定要把引号写上。如果去掉会直接报错。

 

以上是关于小程序数据绑定和setData的主要内容,如果未能解决你的问题,请参考以下文章

小程序-setData方法使用--改变默认数据data初始值方法

微信小程序怎么让数据动态显示?或者绑定点击事件?

小程序 下拉加载数据量大解决方法

小程序实践小坑小结

微信小程序的this和that的用法

小程序如往data里赋值数组