微信小程序模板语法--数据绑定

1、数据绑定

 首先了解微信标签：

<!--  
    text 相当于以前web中的span标签行内元素不会换行
 -->
<text>pages/demo02/demo02.wxml</text>
<!-- 
    view相当于以前web中的div标签块级元素会换行 
-->
<view>div</view>

普通写法： 

**.wxml文件：

<!-- 
数据绑定普通写法 
-->
<!-- 1、字符串 -->
<view>{{msg}}</view>
<!-- 2、数字类型 -->
<view>{{num}}</view>
<!-- 3、boolen类型 -->
<view>是否是男人：{{isBoy}}</view>
<!-- 4、对象类型 -->
<view>{{students}}</view>
<view>{{students.name}}</view>
<view>{{students.age}}</view>
<view>{{students.sex}}</view>
<view>{{students.dept}}</view>

 **.js文件：

     /**
     * 页面的初始数据
     */
       data: {
        msg:"hello world",
        num:1000,
        isBoy:true,
        students:{
            name:"张三",
            age:18,
            sex:"女",
            dept:"计算机"
        }
    },

 

 在标签的属性中使用：

<!-- 5、在标签的属性中使用 -->
<view data-num:="{{num}}">自定义标签</view>

 使用boolen类型充当属性 ：

<!-- 
    6、使用boolen类型充当属性 
    checkbox--复选框；
    字符串和花括号之间一定不要存在空格否则会导致识别失败；
    以下是错误写法：
     <checkbox checked="     {{isBoy}}"></checkbox>
    -->
<view>
    <checkbox checked="{{isBoy}}"></checkbox>
</view>

 7、运算=>表达式

        1.可以在花括号中加入表达式--“语句”

        2.表达式

        指的是一些简单运算数字运算字符串拼接逻辑运算。

            1数字的加减。

            2字符串拼接

            3三元表达式

        3语句

            复杂的代码段

            1.if else

            2.switch

            3.do while

            4.for

 表达式：

 <!-- 数字的加减 -->
 <view>{{1+1}}</view>
 <!-- 字符串拼接 -->
 <view>{{'1'+'1'}}</view>
 <!-- 三元表达式 -->
 <view>{{ 10%2===0 ? '偶数' : '奇数' }}</view>

 持续更新中。。。。