小程序數據綁定和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>

 

＊：如果數據是綁定在屬性里面的，不能把引號去掉，一定要把引號寫上。如果去掉會直接報錯。