04 組件數據、事件與屬性

一.數據來源的三種途徑

• 固定在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>