微信小程序(二) ——模版语法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>

你可能感兴趣的:(微信小程序,小程序)