微信小程序数据绑定

2019-10-10  本文已影响0人  椰果粒

微信小程序的数据绑定和Vue很相似,都是用mustache(大胡子)语法,数据定义在data中。

可以在里边做一些简单的三目运算啥的。

<view>name: {{ name }}</view>
<!-- mustache语法 -->
<view>{{ firstName + " " + lastName }}</view>
<view>{{ age >= 18 ? "成年人" : "未成年人" }}</view>
<view>现在是:{{ nowTime }}</view>
<!-- 切换class -->
<button bindtap="handleChangeColor">切换颜色</button>
<view class="box {{ isActive ? 'active':'' }}">哈哈哈。。。。</view>
  data: {
    name: "嘟嘟嘟",
    firstName: "fu",
    lastName: "dudu",
    age: 18,
    nowTime: new Date().toLocaleString(),
    isActive: false,
  },

 onLoad(){
    // 小需求:获取当前的时间。
    setInterval(() => {
      this.setData({
        nowTime: new Date().toLocaleString(),
      })
    },1000)
  },

  // 切换颜色
  handleChangeColor(){
    this.setData({
      isActive: !this.data.isActive
    })
  },
上一篇下一篇

猜你喜欢

热点阅读