数据绑定

效果图：

 

 界面很丑，主要是代码呈现数据绑定，使用符号{{}}

首先创建一个页面

 

 在写bind.wxml

<!--miniprogram/pages/bind/bind.wxml-->
<view>
  name:{{name}}
</view>

<view class="color-{{colorID}}">
  hello world
</view>

<!--{{false}}是布尔false-->
<swiper autoplay="{{flag ? true : false}}">
  <swiper-item>11</swiper-item>
  <swiper-item>22</swiper-item>
</swiper>

运算
<view>
{{num1+num2}} + num3
</view>

数组
<view wx:for="{{arr2}}">
  {{item}}
</view>

 

看轮播图<swiper>里面的autoplay属性，如果直接写"false"是不生效的，要用bool型的false才生效，正确的形式应该是"{{false}}"，然后在代码中升级了一下，使用了三目运算符，通过flag判断是否自动播放。

colorID也是一个变量，这些变量都是在bind.js中定义的，接下来写bind.js

// miniprogram/pages/bind/bind.js
Page({

  /**
   * Page initial data
   */
  data: {
    name:"mary",
    colorID:"green",
    flag:1>2,
    num1:10,
    num2:20,
    num3:30,

    arr1:[1,2,3,4],
    arr2:["tom","mary","alice"],
    arr3:[
      {
        name:"tom",
        age:25
      },
      {
        name:"mary",
        age:30
      }
    ]
  },

  /**
   * Lifecycle function--Called when page load
   */
  onLoad: function (options) {

  },

  /**
   * Lifecycle function--Called when page is initially rendered
   */
  onReady: function () {

  },

  /**
   * Lifecycle function--Called when page show
   */
  onShow: function () {

  },

  /**
   * Lifecycle function--Called when page hide
   */
  onHide: function () {

  },

  /**
   * Lifecycle function--Called when page unload
   */
  onUnload: function () {

  },

  /**
   * Page event handler function--Called when user drop down
   */
  onPullDownRefresh: function () {

  },

  /**
   * Called when page reach bottom
   */
  onReachBottom: function () {

  },

  /**
   * Called when user click on the top right corner to share
   */
  onShareAppMessage: function () {

  }
})

 

颜色渲染，还需要在bind.wxss中渲染

/* miniprogram/pages/bind/bind.wxss */
.color-red{
  color: red;
}

.color-green{
  color: green;
}

 

如此可行。