微信小程序(二) ——模版语法1

文章目录

• • wxml模板语法
  • • 拼接字符
    • 数据绑定

wxml模板语法

拼接字符

<image src="{{test1+src}}" mode=""/>

数据绑定

1. 在data中定义数据，吧数据定义到data对象中
2. 在wxml中使用数据
3. 不论是绑定内容还是属性都是用 {{}} 语法

动态绑定内容

*声明数据
data:{info:'值'}

*渲染数据 
<view>{{要绑定的数据名称}}</view>

动态绑定属性

 data: { 
     imgSrc:'https://image.meiye.art/pic_1Zh5RftcCXJAJvfhVQ4V2?imageMogr2/thumbnail/470x/interlace/1'
  },

<image src="{{imgSrc}}"></image>

三元运算

data: {
    randomNum:Math.random()*10
}

<view>{{randomNum > 10 ? '随机数大于10': '随机数小于等于10'}} </view>

算数运算

data: {
    randomNum:Math.random().toFixed(2) //生成一个带两位小数的随机数
  }

<view>生成100以内的随机数 {{randomNum*100}}</view>