原生小程序小话题——数据绑定、列表渲染和条件渲染

第一部分 数据绑定

这一部分其实有点奇怪的，因为其数据绑定形式有点混合，这里挑一些重要的写，其实数据绑定的情况分为两种

1.双标签之间

<view> {{ message }} </view>

我这边直接使用的官网的例子，双标签之间直接双括号加变量名就可以了，会从 对应的js文件的data部分去寻找，如下

Page({
  data: {
    message: 'Hello MINA!'
  }
})

2.标签属性

这一部分变量是绑定在标签上作为属性的，最后都要转为一个字符串，所以双括号的外面会有双引号，如下

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

这样的话还是要在js的data部分去取id的值，看一下下面的例子来判断一下区别

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

需要注意，{{}}代表的取某个变量的值，这个值要么是上下文中定义的变量（比如列表渲染），衙要么就是在js的data部分，像我们事件绑定之中，函数并不在data中，上下文也没有对变量的定义。所以这里没有使用{{}}，我们再来看一下这个事件绑定

<view class="middle" catchtap="bindMiddleEvent">

3.双括号内添加自定义的内容，比如下面的，直接放入一个字符串

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

又或是往里面放入一个布尔值

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

当然数据绑定的三目运算、表达式之类的的都在官网上，和vue类似，可以自己看看。

第二部分 列表渲染

1.一般写法

就是那个v-for的过程，当然这边照理要写成wx-for，例子如下

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

一般是固定的写法，和vue不同，index默认是所需要渲染的array变量的index，item则固定式array的子内容，当然我们也可以换名称，如下

<view wx:for="{{goods}}" wx:for-index="idx" wx:for-item="good">
  {{idx}}: {{good.message}}
</view>

我们可以更换index和item的写法来让其更语义化

2.嵌套渲染

当然我们的wx-for可以进行渲染的嵌套，渲染之中可以使用自己在渲染上下文中定义的变量，我们data中的原始数据是这样的

multiArr:{
      teen:[13,14,15,16],
      ty:[20,30,40]
    }

渲染

  <view>测试嵌套渲染</view>
  <view wx:for="{{multiArr}}" wx:for-index="idx" wx:for-item="age">
  <view>{{idx}}:</view>
  <view wx:for="{{age}}">{{item}}</view>
  </view>

第一层嵌套，明显将teen和ty赋值给了age变量，这个变量就是上下文创建的，因此我们在第二层变量的时候加上了{{}}，而第二层的item，实际上就是第二层循环的默认item值。

3.key的绑定

老熟人了

<view>测试嵌套渲染</view>
  <view wx:for="{{multiArr}}" wx:for-index="idx" wx:for-item="age" wx:key="idx">
  <view>{{idx}}:</view>
  <view wx:for="{{age}}" wx:key="index">{{item}}</view>
  </view>

注意了，这两个key全都没有加{{}}，默认加了{{}}就是从上下文或者data当中拿变量。这个其实我个人也是有点搞的，所以说这方面有点麻烦，我一般认为同标签内定义的变量是不需要{{}}拿取的，比如第一个循环中的idx，age就是在这个标签内产生的，所以读取不需要{{}}，而第二个循环中的age不在定义的标签内，是在其子标签内，所以读取需要{{}}

第三部分 条件渲染

条件渲染就简单了，如下

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

data：{
length：4
}

看一下下面这一段能不能实现

  <view wx:if="{{length > 5}}"> 1 </view>
  <view>haha</view>
  <view wx:elif="{{length > 2}}"> 2 </view>
  <view wx:else> 3 </view>

肯定不能啦，这种判断，必须紧紧依靠，这  <view>haha</view>明显破坏了逻辑

vue当中有v-if和v-show，小程序当中也相应给出了hidden这个属性

<view hidden="{{true}}">条件渲染测试</view>

其实就是一个v-show，控制display的开关。

以上就是今天的内容