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

文章目录

wxml模板语法

拼接字符

html 复制代码
<image src="{{test1+src}}" mode=""/>

数据绑定

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

动态绑定内容

js 复制代码
*声明数据
data:{info:'值'}
html 复制代码
*渲染数据 
<view>{{要绑定的数据名称}}</view>

动态绑定属性

js 复制代码
 data: { 
     imgSrc:'https://image.meiye.art/pic_1Zh5RftcCXJAJvfhVQ4V2?imageMogr2/thumbnail/470x/interlace/1'
  },
html 复制代码
<image src="{{imgSrc}}"></image>

三元运算

js 复制代码
data: {
    randomNum:Math.random()*10
}
html 复制代码
<view>{{randomNum > 10 ? '随机数大于10': '随机数小于等于10'}} </view>

算数运算

js 复制代码
data: {
    randomNum:Math.random().toFixed(2) //生成一个带两位小数的随机数
  }
html 复制代码
<view>生成100以内的随机数 {{randomNum*100}}</view>
相关推荐
三原7 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me8 小时前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_233310 小时前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷15 小时前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2501_915921431 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
基于定制开发开源AI智能名片与S2B2C商城小程序的旅游日志创新应用研究
人工智能·小程序·旅游
脑袋大大的1 天前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
2301_805962931 天前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero1 天前
微信小程序121~130
微信小程序·小程序
難釋懷1 天前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++