微信小程序(二) ——模版语法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>
相关推荐
游戏开发爱好者89 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang10 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金12 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq13 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷13 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯13 小时前
小程序自定义组件学习笔记
微信小程序
阿眠15 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184117 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
xmdoor20 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序