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

左手的ㄟ右手 2023-10-05 22:01 75阅读 0赞

## **1、数据绑定** ##

首先了解微信标签：

<text>pages/demo02/demo02.wxml</text>
    
    <view>div</view>

普通写法：

\*\*.wxml文件：

<view>{
       {msg}}</view>
    
    <view>{
       {num}}</view>
    
    <view>是否是男人：{
       {isBoy}}</view>
    
    <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:"计算机"
            }
        },

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

### 在标签的属性中使用： ###

<view data-num:="{
       {num}}">自定义标签</view>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

###  **使用boolen类型充当属性 ：** ###

<view>
        <checkbox checked="{
       {isBoy}}"></checkbox>
    </view>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

### 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>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

持续更新中。。。。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b304f6aaa15c49daa5b3ee6c306bcd29.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/18e216c8de76412781609f0e6c4707ee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/fd4484a728334660a1f097f3ab584c3e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/3cdf37d9a3614b918900f574ce40b7ec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/321df45354184dde98e097cab07681b6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16