微信小程序语法WXML

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

view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。

text标签也是我们开发中常用的，这个相当于Html中的span

image标签相当于我们Html中的img。

官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/

数据绑定

在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成界面的实时更新。

data: {
　　msg:"hello world",
　　num: 18,
  },

引用数据

　　通过{{}}的方式可以引用数据。

<view>{{msg}},{{num + 10}}</view>

逻辑渲染

    <!-- wx:if 相当于vue中的 v-if -->
    <view class="img1" wx:if='{{length == "first"}}'>
      <text>{{msg.img1}}</text>
    </view>
    <!-- wx:elif 相当于vue中的 v-else-if -->
    <view class="img1" wx:elif='{{length == "second"}}'>
      <text>{{msg.img2}}</text>
    </view>
     <!-- wx:else 相当于vue中的 v-else -->
    <view class="img1" wx:else>
      <text>{{msg.img3}}</text>
    </view>

　　因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

  <!-- 也可以在对应data定义true和false -->
  <block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
  </block>

　　除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM，hidden属性则是通过display属性设置为none来进行条件渲染。

 <!-- 也可以在对应data定义true和false,true为隐藏 -->
  <view hidden="{{true}}">
    隐藏
  </view>

这篇关于微信小程序语法WXML的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！