这篇“微信小程序的条件渲染怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序的条件渲染怎么实现”文章吧。
在框架中,使用 wx:if=""
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}">True<view>
如果condition
的值为true,就会在页面上渲染出view组件,否则将不会显示该组件。同时还可以结合wx:elif
和wx:else
来使用,此时可以进行多条件的判断是否渲染该代码。
<view wx:if="{{type===1}}">组件1</view> <view wx:elif="{{type===2}}">组件2</view> <view wx:else>组件3</view>
下面做一个演示:在js
文件的data中定义一个type,同时在wxml
文件中定义三个view组件,根据type的值来决定是否渲染view组件。
此时,改变type的值就可以改变页面渲染的内容。
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
注意:不是一个组件,只是一个包裹性的容器,不会在页面上做任何渲染。
下面做一个演示:在<block>
中包裹两个view
组件,使用wx:if
来决定是否需要渲染这两个组件。
此时在页面上渲染了两个view
组件,block
作为包裹性的容器并没有被渲染。
在框架中,使用 hidden=""
来控制组件的显示与隐藏。与前面不同的是,hidden组件始终会被渲染,只是简单的控制显示与隐藏。
<view hidden="{{false}}">当条件为true时则会隐藏该元素</view>
下面做一个演示:在js
文件中定义一个flag,在wxml
文件中使用hidden
隐藏view组件。
可以在AppData
中改变flag的值从而控制是否隐藏该view组件。
因为 wx:if
之中的模板也可能包含数据绑定,所以当 wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if
也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
较好。
所以在使用条件渲染时,要根据不同的应用场景来选择!只有熟练的掌握,才能在小程序开发中提高效率。
被 wx:if 控制的区域,框架有一个局部渲染的过程,会根据控制条件的改变,动态创建或销毁对应的 UI结构。类似Vue中的v-if
wx:if 是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。类似Vue中的v-show
总结:wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
以上就是关于“微信小程序的条件渲染怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。