一,数据绑定
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 } )