2021-11-03

本文主要是介绍2021-11-03，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!--

  1 text 相当于以前web中的 span标签 行内元素 不会换行

  2 view 相当于以前web中的 div标签  块级元素 会换行

  3 checkbox 以前的复选框标签

-->

<text>1</text>

<text>2</text>

<view>3</view>

<view>4</view>

<view>{{msg}}</view>

<view>{{num}}</view>

<view>{{person.age}}</view>

<view>{{person.height}}</view>

<view>{{person.weight}}</view>

<view>{{person.name}}</view>

<!-- 5 在标签的属性中使用-->

<view data-num="{{num}}">自定义属性</view>

<!-- 6 使用bool类型充当属性 checked   字符串和花括号之间一定不要存在空格，会导致识别失败-->

<view>

<checkbox checked="{{ischecked}}"></checkbox>

</view>

<!--

  7 运算=>表达式

   1 可以在花括号中 加入 表达式"语句"

   2 表达式

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

      1 数字的加减

      2 字符串拼接

      3 三元表达式

    3 语句

      1 复杂的代码段

        1 if else

        2 swith

        3 do while ....

        4 for ....

-->

<view>{{1+1}}</view>

<view>{{'1'+'1'}}</view>

<view>{{ 11%2===0 ?'偶数' : '奇数' }}</view>

<!--

  8 列表循环

    1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称" wx.for-index="循环项的索引" 

    2 wx:key="唯一的值" 用来提高列表渲染的性能

       1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称肯定是 循环数组中的对象的唯一属性

       2 wx:key=:"*this" 就表示一个普通的数组 *this 表示是循环项

       [1，2，3，4]

       ["1","222","asd"]

    3 当出现数组的嵌套循环的时候尤其要注意 一下绑定的名称不要重名

     wx:for-item="item" wx:for-index="index"

    4 默认情况下 我们不写 wx:for-item="item" wx:for-index="index"

    小程序也会把循环项的名称和索引的名称 item和 index

    只有一层循环的话（ wx:for-item="item" wx:for-index="index"）可以省略

    9 对象循环

     1 wx:for="{{数组或者对象}}"  wx:for-item="对象的值" wx:for-index="对象的属性"

     2 循环对象的时候 最好把 item 和 index 的名称都修改一下

     wx:for-item="value" wx-index-index="key"

-->

<view>

  <view

    wx:for="{{list}}"

    wx:for-item="item"

    wx:for-index="index"

    wx:key="id" >

  索引:{{index}}

  --

  值:{{item.name}}

  </view>

</view>

<view>

  <view>对象循环</view>

  <view wx:for="{{person}}" wx:for-item="value" wx-index-index="key" wx:key="age">

  属性：{{key}}

  --

  值：{{value}}

  </view>

</view>

<!--

  10 block

    1 占位符的标签

    2 写代码的时候 可以看见标签存在

    3 页面渲染的时候会被移除掉

-->

<view>

  <block

    wx:for="{{list}}"

    wx:for-item="item"

    wx:for-index="index"

    wx:key="id"

    class="my_list" >

  索引:{{index}}

  --

  值:{{item.name}}

  </block>

</view>

<!--

  11 条件渲染

    1 wx:if="{{true/false}}"

      1 if,else if else\

       wx:if

       wx:elif

       wx:else

    2 hiddden

      1 在标签上直接加入属性

-->

<view>

  <view>条件渲染</view>

  <view wx:if="{{true}}">显示</view>

  <view wx:if="{{false}}">隐藏</view>

  <view wx:if="{{flase}}">1</view>

  <view wx:elif="{{flase}}">2</view>

  <view wx:else>3</view>

  <view>-----------------</view>

  <view hidden>hidden</view>

  <view hidden="{{true}}">hidden</view>  

</view>

这篇关于2021-11-03的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！