微信小程序如何插值？

1、微信小程序插值？

        微信小程序插值与vue插值的相同点：微信小程序的插值和咱们vue里面的插值是一样的，都是用双大花括号括起来的

插值的使用

定义变量在页面的js文件中的pages对象（this）里面的data里面定义，之后就可以在我们的wxml页面利用插值语法使用了。

js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 100,
    str: '失去的今天是死去的人奢望的明天！',
    bloo: false,
    n: null,
    u: undefined,
    arr: [1, 2, 3, 4, 5],
    obj: { a: 1 },
    arr1: [{ a: 1 }, { a: 2 }],
  },
})

页面代码

<!-- number -->
<view>{{num}}</view>

<!-- string-->
<view>{{str}}</view>

<!-- boolean -->
<view>{{bloo}}</view>

<!-- null -->
<view>{{n}}</view>

<!-- undefined : 结果为空 ,可以用于优化代码（比里面填个空值更好，场景：目前值是空的，更新改变值，用undefined声明比较好）-->
<view>{{u}}</view>

<!-- array : 数组可以渲染出来 -->
<view>{{arr}}</view>

<!-- object ：对象渲染结果为：空    [object，Object]-->
<view>{{obj}}</view>

<!-- 数组包对象:渲染结果为空， [object，Object]， [object，Object] -->
<view>{{arr1}}</view>

<!-- 算术运算 -->
<view>{{num+num}}</view>
<view>{{num-num}}</view>
<view>{{num*num}}</view>
<view>{{num/num}}</view>

<!-- 字符串拼接 -->
<view>{{num+str}}</view>

<!-- 表达式：场景bloo  true  red  ;  false   orange -->
<view style="color:{{bloo?'red':'orange'}};">加油</view>
<view class="{{bloo?'red':'orange'}};">嗨嗨</view>