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

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>