一.数据来源的三种途径
- 固定在WXML中
- 固定在JS中,与WXML进行绑定显示
- 有服务器传回,加载到JS中,与WXML进行绑定显示
二.数据绑定
1.wxml中使用data中的数据
-
在js中的data下定义变量内容,可以在页面使用
{{}}
进行数据绑定 -
实例代码
-
index.js
Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { /* 定义变量count,数据绑定 */ count: 10, likeStatus: false, likePicUrl: 'images/like.png', disLikePicUrl: 'images/[email protected]' }, /** * 组件的方法列表 */ methods: {} })
-
index.wxml使用数据绑定
<view bind:tap="onLike" class="container"> <image src="{{likeStatus?likePicUrl:disLikePicUrl}}"></image> <text>{{count}}</text> </view>
-
2.组件的properties属性
-
组件的属性定义在properties中,定义的每一个属性都是对象,分别包含type(必填)、value(选填)和observer(选填)三个属性值
-
wxml绑定的方式与data相同,使用
{{}}
的方式进行绑定 -
实例代码
-
index.js
Component({ /** * 组件的属性列表 */ properties: { likeStatus: { // type是必填字段,表示属性的类型 type: Boolean, // value是选填字段,表示属性的默认值 value: true, // observer是选填字段 observer: ()=> {} }, count: { type: Number // Number类型value默认是0 } }, /** * 组件的初始数据 */ data: { /* 定义变量count,数据绑定 */ likePicUrl: 'images/like.png', disLikePicUrl: 'images/[email protected]' }, /** * 组件的方法列表 */ methods: { onLike: (event) => { console.log(event) } } })
-
index.wxml
<view bind:tap="onLike" class="container"> <image src="{{likeStatus?likePicUrl:disLikePicUrl}}"></image> <text>{{count}}</text> </view>
-
-
获取properties的属性值的方式是
let variable = this.properties.properties属性名
3.动态赋值
-
使用
this.setData({属性名:属性值})
的方式动态赋值,从而在页面使用{{}}
可以动态修改对应内容 -
实例代码
-
index.js
Component({ /** * 组件的属性列表 */ properties: { likeStatus: { // type是必填字段,表示属性的类型 type: Boolean, // value是选填字段,表示属性的默认值 value: false, // observer是选填字段 observer: ()=> {} }, count: { type: Number // Number类型value默认是0 } }, /** * 组件的初始数据 */ data: { /* 定义变量count,数据绑定 */ likePicUrl: 'images/like.png', disLikePicUrl: 'images/[email protected]' }, /** * 组件的方法列表 */ methods: { onLike: function(event) { let like = this.properties.likeStatus; let count = this.properties.count; // this.setData({})指明要更新的变量 this.setData({ count: like?count-1:count+1, likeStatus: !like }); } } })
-
index.wxml
<view bind:tap="onLike" class="container"> <image src="{{likeStatus?likePicUrl:disLikePicUrl}}"></image> <text>{{count}}</text> </view>
-