微信小程序指令怎么使用（微信小程序指令怎么使用的）

微信小程序指令有：1、“wx:for”指令，使用方法如“view wx:for="{ { data_list } } "> { { index } } { { item } } ”；2、“wx:for-item”指令，该指令可以指定数组当前元素的变量名；3、“wx:for-index”指令，该指令可以指定数组当前下标的变量名；4、“wx:if”指令；5、数据绑定指令等。

微信小程序：常用的指令/组件

一. 指令

1.1 wx:for指令

• 1.1.1 html

1. 内置了一个index/item，前者索引，后者元素

viewwx:for="{
{
data_list}
}
    ">
{
{
index}
}
{
{
item}
}
    index索引item元素/view>
    

2. 修改

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

viewwx:for="{
{
array}
}
    "wx:for-index="idx"wx:for-item="itemName">

{
{
idx}
}
:{
{
itemName.message}
}
    
/view>
    

• 1.1.2 js

data:{

data_list:['大饼','洋葱']
}
    ,

1.2 wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

viewwx:if="{
{
    length>
5}
}
    ">
    1/view>

viewwx:elif="{
{
    length>
2}
}
    ">
    2/view>
    
viewwx:else>
    3/view>
    

1.3 block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。

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

注意： block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

blockwx:if="{
{
true}
}
    ">
    
view>
    view1/view>
    
view>
    view2/view>
    
/block>
    

1.4 数据绑定

• 1.4.1 html

view>
数据1：{
{
message}
}
    /view>
    

• 1.4.2 js

Page({


/**
*页面的初始数据
*/
data:{

message:"新年快乐",
}

)}
    

二. 组件(标签)

2.1 view---类似与div

2.2 image---image

2.3 text---span

感谢各位的阅读，以上就是“微信小程序指令怎么使用”的内容了，经过本文的学习后，相信大家对微信小程序指令怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！