位置:电子教程 > 微信小程序入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序起步
小程序基础知识
小程序基础语法
当前阅读教程:微信小程序入门教程 > 变量
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 常用数据 下一篇: 对象

1.变量的定义和使用

在小程序中对应的.js文件里面的data区块定义变量,然后在对应的.wxml页面使用变量。下面通过案例来讲解。

.js文件中变量的定义示例

小白教程网www.2d5.net

如下:

data: {
    myvar01: "我是变量01",
    myvar02: "我是变量02",
},

WXML 中的动态数据均来自对应 Page data。数据绑定使用双大括号将变量包起来。.wxml文件中变量的显示,代码示例

小白教程网www.2d5.net

如下:


<!--简单变量的使用-->
<view>{{myvar01}}</view>
<view>{{myvar02}}</view>


效果如图9-1所示。

image.png




2.通过事件来改变变量

在小程序中对应的.js文件定义事件来处理内容,然后在对应的.wxml页面使用bindtap来调用事件。

.wxml文件中事件的定义示例

小白教程网www.2d5.net

如下:

<!--简单变量的使用-->
<view>{{myvar01}}</view>
<view>{{myvar02}}</view>
<!—按钮调用事件setvar01-->
<button  bindtap='setvar01' type='primary' style='width:90%'>
  通过事件来改变变量的值
</button>


.js文件中事件的定义示例

小白教程网www.2d5.net

如下:

  setvar01:function() //定义事件
  {
//myvar01:"我是变量01改变后的值" 
//直接写是错误的,需要用setData
    this.setData({
      myvar01: "我是变量01改变后的值" 
    })
  },


点击前和点击后的效果图

小白教程网www.2d5.net

效果如图9-2和图9-3所示。

image.png


上一篇: 常用数据 下一篇: 对象
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)