微信小程序 视图层

数据绑定

在页面 Js 里绑定变量

  /**
   * 页面的初始数据
   */
  data: {
        id:"big",
        msg:"大数据男孩",
        dict:{
            name:"小蓝"
        }
  },

普通写法

<view>
    {{ msg }}
</view>
<view>
    {{ dict.name}}
</view>

组件属性

<view id="{{id}}"></view>

bool类型

bool类型 在属性里不能直接写，需要加 {{}} 才有用

<view>
    <checkbox checked="{{false}}"></checkbox>
</view>

运算

页面 Js文件 绑定变量数组

  /**
   * 页面的初始数据
   */
  data: {
        a:10,
        b:20,
        isChecked:true,
        c:"大数据",
        d:"男孩"
  },

三元运算

<view>
    <checkbox checked="{{isChecked?true:flase}}"></checkbox>
</view>

算数运算

<view> {{ a + b}}</view>

字符串组合

<view> {{ c + d}}</view>

wx:for 循环

页面 Js文件 绑定变量数组

  /**
   * 页面的初始数据
   */
  data: {
    arr:["1","2","3","4"]
  },

wxml 文件循环变量数组

<!-- 默认遍历的元素是 item 索引是 index -->
<!-- wx:key 是为了提高性能 -->
<view>
    <view wx:for="{{arr}}" wx:key="index">
        {{index}}:{{item}}
    </view>
</view>

改变默认的遍历元素 & 索引

<view>

    <block wx:for="{{arr}}" wx:key="index" wx:for-item="color" wx:for-index="num">
        {{color}} {{num}}
    </block>
</view>

wx:if 条件渲染

主要作用是 隐藏 & 显示 标签

  /**
   * 页面的初始数据
   */
  data: {
        a:5
  },

显示 & 隐藏

<view wx-if="{{true}}">大数据男孩</view>
<view wx-if="{{false}}">你看不见我</view>

条件判断

<view wx:if="{{ a > 5 }}">6</view>
<view wx:elif="{{a < 5}}">4</view>
<view wx:else>5</view>