微信小程序的数据绑定以及数据简单运算

WXML是框架设计的⼀套标签语⾔,结合基础组件、事件系统,可以构建出⻚⾯的结构。

在.js文件当中设置变量,包括数字,字符,逻辑,json,list等等。
首先在文件的data里面可以设置一些变量,数字,字符等。

	msg:"hello world",
    num:1000,
    xb:false

如下图:表示文件。以及代码编辑的区域。js文件就是现在所编辑的。
在这里插入图片描述
再者,在已经有变量之后,在wxml文件当中对数据进行获取,有俩个标签是很常见的。
分别就是<text><view>,text就好比html当中的行级元素,而view则好比于<div>块级元素。获取变量使用的是{{变量名}},如下所示:

<text>pages/img/img.wxml</text>
<text>123456789</text>    <!--行级元素-->
<view>987654321</view>    <!--块级元素-->
<view>{{msg}}</view>
<view>{{num}}</view>
<view>{{xb}}</view>

获取变量值后,看一下效果,以及text和view的区别。(最上面带颜色的是设置了样式,忘记取消了。。。)
在这里插入图片描述
还有就是json对象。定义数据。

 person:{
      name:"岳云",
      age:18,
      high:184
    },

获取当中的数据时,需要给出对象名.属性名,直接获取person会返回Object对象。

<view>{{person}}</view>
<!--对对象的值进行获取。-->
<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.high}}</view>

直接在wxml文件当中实现运算:数字运算以及字符拼接运算:

<view>{{1+1}}</view><!--简单运算-->  --》 = 2
<view>{{"1"+"1"}}</view>			--》 = 11
发布了285 篇原创文章 · 获赞 39 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_44973159/article/details/104721159