微信小程序(二) ——模版语法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>
相关推荐
卷Java2 小时前
预约记录关联查询接口说明
java·开发语言·spring boot·python·微信小程序
杏花春雨江南5 小时前
小程序的页面宽度 设置多少合适??
小程序
fakaifa6 小时前
【高级版】沃德政务招商系统源码+uniapp小程序
小程序·uni-app·源码下载·沃德政务招商系统·招商系统源码
云起SAAS6 小时前
族谱家谱抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·族谱家谱
明月(Alioo)6 小时前
用AI帮忙,开发刷题小程序:微信小程序在线答题系统架构解析
微信小程序·小程序·系统架构
明月(Alioo)6 小时前
用AI帮忙,开发刷题小程序:从零开始,构建微信小程序答题系统
微信小程序·开源·aigc
有来技术6 小时前
UniApp 自定义导航栏适配指南:微信小程序胶囊遮挡、H5 与 App 全端通用方案
微信小程序·uni-app
知识分享小能手6 小时前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
说私域11 小时前
百丽企业数字化转型失败案例分析及其AI智能名片S2B2C商城小程序的适用性探讨
人工智能·小程序
卷Java15 小时前
违规通知功能修改说明
java·数据库·微信小程序·uni-app