【融职培训】Web前端学习 第10章 小程序开发4 小程序开发

一,数据绑定

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 } )

【融职教育】在工作中学习,在学习中工作

猜你喜欢

转载自blog.csdn.net/ITXDL123/article/details/107205206