微信小程序(二) ——模版语法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>
相关推荐
丁总学Java1 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域2 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165023 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦10 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac13 小时前
微信小程序的组件
微信小程序
stormjun15 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck15 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23417 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong17 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序