【融职培训】Web前端学习 第10章 小程序开发4 小程序开发
【融职培训】Web前端学习 第10章 小程序开发4 小程序开发
学习猿地
发布于 2020-07-13 14:10:27
发布于 2020-07-13 14:10:27
一，数据绑定
VUE：vue动态绑定一个变量的变量元素的某个属性的时候，会在变量前面加上冒号：，例：
<p:title="tit">我的title属性绑定了数据</p> 小程序：绑定变量的变量元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。
<image src="{{imgSrc}}"></image>二，列表渲染
Vue
VUE循环内部v-for =“数据中的项目”或v-for =“数据，数据中的索引” VUE循环内部{{item.first}} item是随便定义的，可以换成别的
1 < ul id = “ example-1” >
2 < li v-for = “项目中的项目” >
3 { { 项目。讯息} }
4 < / li >
5 < / ul >
6 var example1 = new Vue （{
7 el：'＃example-1' ，
8 data：{
9 项目：[
10 { 消息：'Foo' } ，
11 { 消息：'Bar' }
12 ]
13 }
14 } ）小程序
微信小程序循环wx：for =“ {{data}}”“ 小程序循环内部{{item.first}} item是固定的，不是自己定义的
1 页面（{
2 数据：{
3 项目：[
4 { message：'Foo' } ，
5 { message：'Bar' }
6 ]
7 }
8 } ）
9 < 文字 wx：for = “ {{items}}” > { { item } } < / 文本>三，显示与隐藏
- vue中，使用v-if和v-show控制元素的显示和隐藏
- 小程序中，使用wx-if和hidden控制元素的显示和隐藏
四，事件处理
- vue：习惯@event绑定事件，例如：
< 按钮 v-on：单击 =“ 计数器+ = 1 ” >添加1 </ 按钮>- 小程序：用bindtap绑定事件，例如：
< button bindtap =“ noWork ” >明天不上班</ button >五，绑定事件传参
- 在vue中，绑定事件传参挺简单，只需要在触发事件的方法中，把需要传递的数据作为形参放置就可以了，例如：
1 // <button @ click =“ say（'明天不上班'）”> </ button>
2
3 新 Vue （{
4 el：'#app' ，
5 方法：{
6 说（arg ）{
7 consloe 。日志（arg ）
8 }
9 }
10 } ）- 在小程序中，不能直接在绑定事件的方法中进行参数调整，需要将参数作为属性值，绑定到元素上的数据属性上，然后在方法中，通过e.currentTarget.dataset。*方式获取，从而完成参数的传递。例如：
1 // <view class ='tr'bindtap ='toApprove'data-id =“ {{item.id}}”> </ view>
2 页面（{
3 数据：{
4 原因：''
5 } ，
6 批准（e ） {
7 设 id = e 。currentTarget 。数据集。id ;
8 }
9 } ）本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-07-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读