微信小程序_wxml学习

wxml里面有很多类似Vue的语法。

数据绑定

比如数据绑定,在js里面的data里面写。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg:"hello world!",
    isShow:true,
    arrayObj:["周一","周二","周三"]
  },
})

只要通过差值表达式,就可以将数据渲染到页面里。

<view>{{msg}}</view>  //hello world!

是不是很像Vue里面的new Vue({ }) 里面写个data。👱‍♀

wx:if的使用

等效于Vue中的v-if

<view wx:if="{{isShow}}">显示</view>
<view wx:if="{{!isShow}}">不显示</view>

isShow = true ,猜猜显示哪一个?你脑中的画面和下图一样吗。

image-20200917183710267

同时还有wx:elif 和 wx:else。

today=3,下面的代码,运行后什么样子,脑子里面有画面了吗?

<view wx:if="{{today === 1}}">周一</view>
<view wx:elif="{{today === 2}}">周二</view>
<view wx:elif="{{today === 3}}">周三</view>
<view wx:else>周四</view>

image-20200917184527642

对,没错,就是只显示周三。

Vue里面还有v-show,那么微信小程序里面有没有wx:show呢?答案是,没有!

但是它有一个替代的的属性 hidden,等效于v-show。

<view hidden="{{true}}"> 
  测试
</view>

显然,上面的代码跑后就是什么也不显示,控制台的样式如下图:

image-20200917184847538

wx:for的使用

wx:for可用于遍历一个数组,通过item访问元素,index访问索引(index和item必须放在差值表达式里面,不然只会被解析成字符串)

arrayObj=[“周一”,“周二”,“周三”]

<view wx:for="{{arrayObj}}" 
      wx:key="*this" 
      wx:if="{{ index+1 === today ? true : false }}"
      >{{index+1}}. {{item}}
</view>

遍历后的结果:

image-20200917185331413

wx:key 是用来指定列表中项目的唯一的标识符,可以指定它为this。保留关键字 this 代表在 for 循环中的 item 本身。

wxml里面有很多类似Vue的语法。

数据绑定

比如数据绑定,在js里面的data里面写。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg:"hello world!",
    isShow:true,
    arrayObj:["周一","周二","周三"]
  },
})

只要通过差值表达式,就可以将数据渲染到页面里。

<view>{{msg}}</view>  //hello world!

是不是很像Vue里面的new Vue({ }) 里面写个data。👱‍♀

wx:if的使用

等效于Vue中的v-if

<view wx:if="{{isShow}}">显示</view>
<view wx:if="{{!isShow}}">不显示</view>

isShow = true ,猜猜显示哪一个?你脑中的画面和下图一样吗。

image-20200917183710267

同时还有wx:elif 和 wx:else。

today=3,下面的代码,运行后什么样子,脑子里面有画面了吗?

<view wx:if="{{today === 1}}">周一</view>
<view wx:elif="{{today === 2}}">周二</view>
<view wx:elif="{{today === 3}}">周三</view>
<view wx:else>周四</view>

image-20200917184527642

对,没错,就是只显示周三。

Vue里面还有v-show,那么微信小程序里面有没有wx:show呢?答案是,没有!

但是它有一个替代的的属性 hidden,等效于v-show。

<view hidden="{{true}}"> 
  测试
</view>

显然,上面的代码跑后就是什么也不显示,控制台的样式如下图:

image-20200917184847538

wx:for的使用

wx:for可用于遍历一个数组,通过item访问元素,index访问索引(index和item必须放在差值表达式里面,不然只会被解析成字符串)

arrayObj=[“周一”,“周二”,“周三”]

<view wx:for="{{arrayObj}}" 
      wx:key="*this" 
      wx:if="{{ index+1 === today ? true : false }}"
      >{{index+1}}. {{item}}
</view>

遍历后的结果:

image-20200917185331413

wx:key 是用来指定列表中项目的唯一的标识符,可以指定它为this。保留关键字 this 代表在 for 循环中的 item 本身。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏2同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值