精华内容
下载资源
问答
  • 条件渲染
    2022-03-06 19:49:01

    1.v-if

    (1).v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

    写法:v-if="表达式"

    v-else-if="表达式"

    v-else="表达式"

    适用于:切换频率较低的场景

    特点:不展示DOM元素直接被移除

    注意:v-if可以和 v-else-if、v-else一起使用 但要求结果不能被打断

    <h1 v-if="awesome">Vue is awesome!</h1>

    也可以用 v-else 添加一个“else 块”:

    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>

    (2).在<template>元素上使用v-if条件渲染分组

    因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

    <template v-if="ok"> 
        <h1>Title</h1>  
        <p>Paragraph 1</p> 
        <p>Paragraph 2</p> 
    </template>

    (3) v-else

    你可以使用 v-else 指令来表示 v-if 的“else 块”:

    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>

    v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

    (4) `v-else-if

    v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:

    <div v-if="type === 'A'"> 
        A 
    </div> 
    <div v-else-if="type === 'B'">
        B 
    </div>
    <div v-else-if="type === 'C'">
        C 
    </div>
    <div v-else> 
        Not A/B/C 
    </div>

    类似于 v-elsev-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

    (5)用key管理可复用的元素

    Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>

    2.v-show:

    另一个用于根据条件展示元素的选项是 v-show 指令

    写法:v-show="表达式"

    适用于:切换频率较高的场景

    特点:不展示的DOM元素不会被移除 仅仅是使用样式隐藏

    备注:使用 v-if 的时候 元素可能无法获取到,而使用v-show一定可以获取到

    注意,v-show 不支持 <template> 元素,也不支持 v-else

    1. v-if VS v-show

      v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

      v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

      相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

      一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    4.v-if 与 v-for 一起使用

    v-ifv-for 一起使用时,v-for 具有比 v-if 更高的优先级。

    不推荐同时使用 v-ifv-for

    更多相关内容
  • 简单理解Vue条件渲染

    2020-09-01 01:46:33
    主要帮助大家简单理解Vue条件渲染,什么是Vue条件渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 在微信小程序中,小程序是使用wx.if=”{{条件}}”来判断是否渲染该代码块,用法如下: ”{{条件}}”>True 也可以用wx.elif和wx.else来添加一个else块,事例如下: ”{{a>1}}”> 1 ”{{a>2}}”> 2 <view> 3 2...
  • 主要介绍了详解React 的几种条件渲染以及选择,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 条件渲染在React里就和js里的条件语句一样。下面这篇文章主要给大家介绍了关于React学习记录之条件渲染的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
  • 小程序 条件渲染

    2018-01-06 12:14:48
    微信小程序数据绑定-条件渲染微信小程序数据绑定-条件渲染
  • 主要介绍了Vue.js 中的条件渲染指令,Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考...
  • 微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)微信小程序练习demo:数据绑定条件渲染练习...
  • 【微信小程序】条件渲染和列表渲染

    千次阅读 多人点赞 2022-07-16 20:43:17
    本文讲解了微信小程序的事件传参细节,input 事件的介绍和使用,以及`wxml`中比较重要的条件渲染和列表渲染

    🍒🍒 观众老爷们好啊,牛牛又更新了,上文我们详细了解了微信小程序中的事件绑定,那么今天我们就来讲讲WXML语法中的列表渲染和条件渲染,它俩也是非常重要的知识点,赶紧学起来吧。
    🍒🍒 不过首先,我们想来补充一下数据传参的知识点以及常用的input事件用法。

    一,事件传参

    首先我们需要知道,微信小程序中事件处理函数的传参,并不能直接在绑定时间的同时做,也就是说以下这样操作。

    <view bindtap="tapName(2)">错误</view>
    

    是不行的,如此编译器只会将整个tapName(2)识别成事件处理函数的名字。

    如果想要传参,需要为组件提供自定义属性,格式如此——data-**代表该自定义属性的名字。

    具体实现如下:

    <view bindtap="tapName" data-info="{{2}}"></view>
    

    然后我们在事件处理函数中,只需要通过event.target.dataset.info即可获取该传入的参数。

    还记得之前说过事件对象event中的target属性吗,里面就是记录触发事件组件的一些属性值,上面用到的原理就是这里。

    小tip:
    需要注意的是,对于已经确认为数值的参数,我们采用Mustache语法,也就双括号括住参数,而如果我们只是用双引号包围,如下:

    <view bindtap="tapName" data-info="2"></view>
    

    解析到的data-info的值将会是一个字符串,"2"

    二,input事件使用

    input事件在小程序开发中是比较常用的,具体表述就是为文本框绑定事件,当内容发生变化触发。

    如下设置:

    <input type="text" bidninput="changetext"></input>
    

    一般我们使用该事件时,需要在对应的事件处理函数获取到input文本框的输入值,可以如下进行操作:

    changetext(e){
    	console.log(e.detail.value)
    }
    

    e.detail.value就是对应着变化后的最新值。

    三,条件渲染

    条件渲染其实就相当于在WXML中的if语句,利用条件判断是否渲染某一个或一部分的组件。

    语法为wx:if="{{condition}}",通过判断里面的condition增加来渲染,如果为true,则渲染组件。

    除了if,还有与之配套的elifelse

    <view wx:if="{{type==1}}"></view>
    <view wx:if="{{type==2}}"></view>
    <view>不详</view>
    

    当type为1,只有第一个view组件被渲染,当type为2,只有第二个组件被渲染,如果均不满足,则只渲染第三个组件。

    其实条件渲染除了if还有hidden可以做到。

    语法为hidden= "{{condition}}"hidden为组件属性,当里面condition条件值为false,组件不隐藏,为true,组件隐藏。

    说到这里大家可能发觉,我们还不知道如何一次性控制多组件展示隐藏。

    微信小程序中有一个<block>,它并不是组件,只是有包裹性质的容器,即使写进wxml,也不会被渲染(调试器也不会看到它的存在),我们可以利用它来实现。

    <block wx:if="{{info==1}}">
    <view>a</view>
    <view>b</view>
    <view>c</view>
    </block>
    

    if和hidden对比:

    从本质上,

    • if是动态创建和移除组件
    • hidden是通过改变样式,设置displaynoneblock实现的

    从使用上,当我们需要频繁的切换时,建议使用hidden,而当控制条件复杂时,特别需要用到elseif效果的时候,建议使用if

    四,列表渲染

    列表渲染其实从理解上,就是在wxml语法中的for语句,实现循环。

    语法为wx:for="{{array}}",根据指定数组,循环渲染复杂的组件,注意,双括号中的是数组哦。使用中,我们一般同时还有给其设定唯一key值,语法为wx:key

    比如我们的数组如下:

    user:[
    	{id:1, name:"apple"},
    	{id:2, name:"add"},
    	{id:3, name:"abandon"}
    ]
    

    这样我们可以设置wx:key="id",当我们调用里面的name,循环会根据key遍历,调用时key为何值,调用就是哪一个name值。

    <view wx:for="{{user}}" wx:key="id">{{name}}<view>
    

    需要注意的是,设置key不需要使用{{}}

    如果数组没有这种id属性,我们可以直接设定key为index,如wx:key="index",也是可以循环遍历数组。

    好啦,本次小程序的文章到这里就结束啦,如果对您有帮助的话,可以继续关注牛牛后续的文章呀,您的支持是我们创作的最大动力!

    🍒牛牛最近发现一款刷题神器,各大互联网大厂的面试真题,还有超大面试题库。
    🍒里面还有很多大佬的面经,赶紧卷起来!!
    点击直接访问

    债见~~

    展开全文
  • React 条件渲染

    2020-12-13 19:01:39
    React 条件渲染 在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件...
  • 详解React 条件渲染

    2020-10-15 03:57:01
    主要介绍了React 条件渲染的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
  • 在 React 中实现条件渲染的七种方法

    千次阅读 2022-05-24 15:22:08
    条件渲染方式 一、if 语句 先从 React 最基本的条件类型来看。如果有数据就显示组件,如果没有数据就不显示任何内容。posts 为需要渲染的列表: export default function App() { const { posts } = usePosts()...

    条件渲染方式

    一、if 语句

    先从 React 最基本的条件类型来看。如果有数据就显示组件,如果没有数据就不显示任何内容。posts 为需要渲染的列表:

    export default function App() {
      const { posts } = usePosts();
    
      if (!posts) return null;
    
      return (
        <div>
          <PostList posts={posts} />
        </div>
      );
    }

    这种形式会生效的原因就是我们会提前返回,如果满足条件(posts 值不存在),就通过return null 在组件中不显示任何内容。

    如果有多个要检查的条件时,也可以使用 if 语句。例如,在显示数据之前检查加载和错误状态:

    export default function App() {
      const { isLoading, isError, posts } = usePosts();   
      if (isLoading) return <div>Loading...</div>;
      if (isError) return <div>Error!</div>;
      return (
        <div>
          <PostList posts={posts} />
        </div>
      );
    }

    这里我们可以多次使用 if 语句,不需要再使用 else 或者 if-eles 语句,这样就减少了需要编写的代码,并且可读性更强。

    二、三元运算符

    当我们想提前退出或者什么都不显示时,if 语句会很有用。但是,如果我们不想写一个与返回的 JSX 分开的条件,而是直接在其中写呢?那就可以使用三元表达式来编写条件。

    在 React 中,我们必须在 JSX 中包含表达式,而不是语句。这就是为什么我们在 JSX 中只能使用三元表达式,而不是 if 语句来编写条件。

    例如,在移动设备的屏幕上显示一个组件,而在更大的屏幕上显示另一个组件,就可以使用三元表达式来实现:

    export default function App() {
      const isMobile = useWindowSize()
    
      return (
        <main>
          <Header />
          {isMobile ? <MobileChat /> : <Chat />}
        </main>
      )
    }

    其实,不必将这些三元表达式包含在 JSX 中,可以将其结果分配给一个变量,然后在需要的地方使用即可:

    export default function App() {
      const isMobile = useWindowSize();   
      const ChatComponent = isMobile ? <MobileChat /> : <Chat />;
      return (
        <main>
          <Header />
          <Sidebar />
          {ChatComponent}
        </main>
      )
    }

    三、&&运算符

    在许多情况下,我们可能想要使用三元表达式,但是如果不满足条件,就不显示任何内容。那代码会是这样的:

    condition ? <Component /> : null.

    可以使用 && 运算符来简化:

    export default function App() {
      const { posts, hasFinished } = usePosts()
      return (
        <>
          <PostList posts={posts} />
          {hasFinished && (
            <p>已经到底啦!</p>
          )}
        </>
      )
    }

    如果条件为真,则逻辑 && 运算符之后的表达式将是输出。如果条件为假,React 会忽略并跳过表达式.

    四、switch

    过多的 if 语句会导致组件变得混乱,可以将多个条件提取到包含 switch 语句的单独的组件中(根据组件逻辑的复杂程度来选择是否提取到单独的组件)。下面来看一个简单的菜单切换组件:

    export default function Menu() {
      const [menu, setMenu] = React.useState(1);
    
      const toggleMenu = () => {
        setMenu((m) => {
          if (m === 3) return 1;
          return m + 1;
        });
      }
      return (
        <>
          <MenuItem menu={menu} />
          <button onClick={toggleMenu}>切换菜单</button>
        </>
      );
    }
    function MenuItem({ menu }) {
      switch (menu) {
        case 1:
          return <Users />;
        case 2:
          return <Chats />;
        case 3:
          return <Rooms />;
        default:
          return null;
      }
    }

    由于使用带有 switch 语句的 MenuItem 组件父菜单组件不会被条件逻辑弄乱,可以很容易地看到给定 menu 状态将显示哪个组件。需要注意,必须为 switch case 运算符使用默认值,因为在 React 中,组件始终需要返回一个元素或 null。

    五、枚举

    在 JavaScript 中,当对象用作键值对的映射时,它可以用作枚举:

    const ENUMOBJECT = {
      a: '1',
      b: '2',
      c: '3',
    };

    假如要创建三个不同的组件 Foo、Bar 和 Default,并根据某种状态显示这些组件:

    const Foo = () => {
      return <button>FOO</button>;
    };
    const Bar = () => {
      return <button>BAR</button>;
    };
    const Default = () => {
      return <button>DEFAULT</button>;
    };

    创建可用作枚举的对象:

    const ENUM_STATES = {
      foo: <Foo />,
      bar: <Bar />,
      default: <Default />
    };

    渲染这个枚举对象的函数:

    function EnumState({ state }) {
      return <div>{ENUM_STATES[state]}</div>;
    }

    上面的 state 属性可以从对象中检索值。可以看到,与 switch case 运算符相比,它更具可读性。

    六、JSX 库

    JSX Control Statements 库扩展了 JSX 的功能,从而可以直接使用 JSX 实现条件渲染。它是一个 Babel 插件,可以在转译过程中将类似组件的控制语句转换为对应的 JavaScript。

    安装babel-plugin-jsx-control-statements包并修改 Babel 配置后,可以像这样重写应用程序:

    export default function App(props) {
      const [isLoggedIn, setIsLoggedIn] = useState(false);
        //...
        return (
          <Choose>
            <When condition={isLoggedIn}>
            <button>Logout</button>;
            </When>
              <When condition={!isLoggedIn}>
              <button>Login</button>;
            </When>
          </Choose>
        );
    }

    当然,不建议这样来编写条件语句,这样会导致代码的可读性变差,并且 JSX 允许使用强大的 JavaScript 功能来自己处理条件渲染,无需添加模板组件即可启用它。

    七、高阶组件

    高阶组件 (HOC)与 React 中的条件渲染完美匹配。HOC 可以帮助处理多个用例,但一个用例可能是使用条件渲染来改变组件的外观。让我们看看显示元素或组件的 HOC:

    function withLoadingIndicator(Component) {
      return function EnhancedComponent({ isLoading, ...props }) {
        if (!isLoading) {
          return <Component {...props} />;
        }
        return (
          <div>
            <p>Loading</p>
          </div>
        );
      };
    }
    const ListWithLoadingIndicator = withLoadingIndicator(List);
    function App({ list, isLoading }) {
      return (
          <ListWithLoadingIndicator isLoading={isLoading} list={list} />
      );
    }

    在这个例子中,List 组件可以专注于呈现列表。而不必再加载状态。HOC 隐藏了实际组件中的所有干扰。最终,可以添加多个高阶组件来隐藏多个条件渲染边缘情况。

    注意事项

    一、小心 0

    来看一个常见的渲染示例,当数组中存在元素时才渲染内容:

    {gallery.length && <Gallery slides={gallery}>}

    预想的结果是,数组存在元素时渲染内容,不存在元素时什么都不渲染。但是,页面上得到了 “0”。这是因为在使用与运算符时,一个假的左侧值(如 0)会立即返回。在JavaScript中,布尔运算法不会将其结果转化为布尔值。所以,React 将得到的值放入DOM中,与 false 不同的是,0 是一个有效的 React 节点,所以最终会渲染成0。

    那该如何避免这个问题呢?可以显式的将条件转换为布尔值,当表达式结果为false时,就不会在页面中渲染了:

    gallery.length > 0 && jsx
    !!gallery.length && jsx
    Boolean(gallery.length) && jsx

    或者使用三元表达式来实现:

    {gallery.length ? <Gallery slides={gallery} /> : null}

    二、优先级

    与运算符(&&)比或运算符(||)具有更高的优先级。所以,要格外小心使用包含与运算符的 JSX 条件:

    user.anonymous || user.restricted && <div className="error" />

    这样写就相当于:

    user.anonymous || (user.restricted && <div className="error" />)

    这样,与运算符左侧为真时就会直接返回,而不会继续执行后面的代码。所以,多数情况下,看到或运算符时,就将其使用括号括起来,避免因为优先级问题而渲染出错:

    {(user.anonymous || user.restricted) && <div className="error" />}

    三、 嵌套三元表达式

    三元表达式适合在两个JSX之间进行切换,一旦超过两个项目,代码就会变得糟糕:

    {
      isEmoji
        ? <EmojiButton />
        : isCoupon
            ? <CouponButton />
            : isLoaded && <ShareButton />
    }

    有时使用 && 来实现会更好,不过一些条件判断会重复:

    {isEmoji && <EmojiButton />}
    {isCoupon && <CouponButton />}
    {!isEmoji && !isCoupon && isLoaded && <ShareButton />}

    当然,这种情况下,使用 if 语句可能是更好的选择:

    const getButton = () => {
        if (isEmoji) return <EmojiButton />;
        if (isCoupon) return <CouponButton />;
        return isLoaded ? <ShareButton /> : null;
    };

    四、避免 JSX 作为条件

    通过 props 传递的 React 元素能不能作为判断条件呢?来看一个简单的例子:

    const Wrap = (props) => {
        if (!props.children) return null;
        return <div>{props.children}</div>
    };

    我们希望 Wrap 在没有包含内容时呈现 null,但 React 不是这样工作的:

    • props.children 可以是一个空数组,例如 <Wrap>{[].map(e => <div />)}</Wrap>。
    • children.length 也失败了:children 也可以是单个元素,而不是数组,例如: (<Wrap><div /></Wrap>)。
    • React.Children.count(props.children)支持单个子项和多个子项,但会认为 <Wrap>{false && 'hi'}{false && 'there'}</Wrap> 包含 2 个项,而实际上有没有任何子项。
    • React.Children.toArray(props.children) 移除无效节点,例如 false。然而,对于一个空片段,仍然是正确的: <Wrap><></><Wrap>。
    • 如果将条件渲染移动到组件内: <Wrap><Div hide /></Wrap> 与 Div = (p) => p.hide ?null : <div /> ,在 Wrap 渲染时永远无法知道它是否为空,因为 react 只会在父级之后渲染子级 div,而有状态的子级可以独立于其父级重新渲染。

    因此,不要将JSX作为判断条件,避免出现一些难以预料的问题。

    五、重新挂载还是更新?

    用三元表达式编写的 JSX 感觉就像是完全独立的代码:

    {hasItem ? <Item id={1} /> : <Item id={2} />}

    当 hasItem 改变时会发生什么?我的猜测是 <Item id={1} /> 卸载,然后 <Item id={2} /> 安装,因为这里写了 2 个单独的 JSX 标签。然而,React 并不知道也不关心我们写了什么,它所看到的只是 Item 元素在同一个位置,所以它保持挂载的实例,更新 props。上面的代码等价于​ ​<Item id={hasItem ? 1:2} />​ ​ 。

    注意:如果三元表达式包含的是不同的组件,如 {hasItem ? <Item1 /> : <Item2 />} ,hasItem改变时,React 会重新挂载,因为 Item1 无法更新为 Item2。

    上述情况会导致一些意外的行为:

    {
      mode === 'name'
        ? <input placeholder="name" />
        : <input placeholder="phone" />
    }

    这里,如果在 name 的 input 中输入了一些内容,然后切换模式(mode),在 name 中输入内容的就会泄漏到 phone 的 input 中,这可能会对依赖于先前状态的复杂更新机制造成更大的破坏。

    这里的一种解决方法是使用 key。通常,我们用它来渲染列表,但它实际上是 React 的元素标识提示——具有相同 key 的元素是相同的逻辑元素:

    {
      mode === 'name'
        ? <input placeholder="name" key="name" />
        : <input placeholder="phone" key="phone" />
    }

    另一种方法是用两个单独的 && 块来替换三元表达式。当 key 不存在时,React 会回退到子数组中项目的索引,因此将不同的元素放在不同的位置与显式定义 key 的效果是一样的:

    {mode === 'name' && <input placeholder="name" />}
    {mode !== 'name' && <input placeholder="phone" />}

     

    展开全文
  • 这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记。 条件渲染 v-if 在 < template> 中配合 v-if 渲染一整组 在使用 v-if 控制元素的时候,我们需要将它添加到这个...
  • 【微信小程序】三分钟学会小程序的条件渲染

    千次阅读 多人点赞 2022-08-11 21:16:08
    这篇文章是三分钟学会小程序的条件渲染教程,所谓的条件渲染就是判断是否需要把代码渲染到展示页面上。使用以下三种方式可以实现条件渲染,各自有不同的应用场景,只有熟练掌握其用法,在使用时才能得心应手。...

    请添加图片描述


    这篇文章是三分钟学会小程序的条件渲染教程,所谓的条件渲染就是判断是否需要把代码渲染到展示页面上。使用以下三种方式可以实现条件渲染,各自有不同的应用场景,只有熟练掌握其用法,在使用时才能得心应手。

    1.wx:if实现条件渲染

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

    <view wx:if="{{condition}}">True<view>
    

    如果condition的值为true,就会在页面上渲染出view组件,否则将不会显示该组件。同时还可以结合wx:elifwx: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的值就可以改变页面渲染的内容。

    2.block结合wx:if使用

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

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

    注意:不是一个组件,只是一个包裹性的容器,不会在页面上做任何渲染。

    下面做一个演示:在<block>中包裹两个view组件,使用wx:if来决定是否需要渲染这两个组件。
    在这里插入图片描述
    在这里插入图片描述
    此时在页面上渲染了两个view组件,block作为包裹性的容器并没有被渲染。

    3.hiden实现条件渲染

    在框架中,使用 hidden="" 来控制组件的显示与隐藏。与前面不同的是,hidden组件始终会被渲染,只是简单的控制显示与隐藏。

    <view hidden="{{false}}">当条件为true时则会隐藏该元素</view>
    

    下面做一个演示:在js文件中定义一个flag,在wxml文件中使用hidden隐藏view组件。
    在这里插入图片描述
    在这里插入图片描述
    可以在AppData中改变flag的值从而控制是否隐藏该view组件。

    4. wx:if vs hidden

    因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

    同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

    相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

    一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

    请添加图片描述

    所以在使用条件渲染时,要根据不同的应用场景来选择!只有熟练的掌握,才能在小程序开发中提高效率。

    展开全文
  • 【微信小程序】条件渲染 列表渲染 原来这样用?

    千次阅读 多人点赞 2022-06-28 20:53:47
    目录WXML 模板语法 - 条件渲染1. wx:if2. 结合 使用 wx:if3. hidden4. wx:if 与 hidden 的对比WXML 模板语法 - 列表渲染1. wx:for2. 手动指定索引和当前项的变量名3. wx:key 的使用 也可以用 wx:elif 和 wx:else ...
  • 获取用户基本信息 ... button open-type=‘getUserInfo’ ...在框架中,使用wx:if=""来判断是否需要渲染该代码块 也可以使用 wx:elif 和 wx:else 来添加一个else块 二、 wx:if VS hidd...
  • 学习vue.js条件渲染

    2020-12-29 04:09:25
    本文实例为大家分享了vue.js中条件渲染的练习代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>条件渲染</title> <...
  • React中的条件渲染

    千次阅读 2022-02-17 09:49:28
    React中的条件渲染 Vue.js中使用v-if/v-else实现模板中的条件渲染; 小程序中使用wx:if/wx:else实现模板中的条件渲染; React中没有模板(即不需要v-if),也没有指令系统(即没有v-if)。——条件渲染需要手工实现 ...
  • 前端之vue的条件渲染

    2022-04-14 23:19:35
    vue的条件渲染
  • 主要介绍了React 条件渲染最佳实践小结(7种),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序 之 条件渲染、列表渲染

    千次阅读 2021-12-23 19:19:40
    条件渲染 wx:if 在框架中,使用 wx:if="" 来判断是否需要渲染该代码块: <view wx:if="{{condition}}"> True </view> 也可以用 wx:elif 和 wx:else 来添加一个 else 块: <view wx:if="{{length >...
  • 一、初探条件渲染 vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍: (1)v-if <div v-if=c1>c1 ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候,渲染出 v-if 所...
  • 一、条件渲染 (一)wx:if 在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块。 <view wx:if="{{condition}}">True</view> 也可以用wx:elif 和 wx:else来添加else判断: <view wx:...
  • VUE3 之 条件渲染

    2021-12-30 18:36:37
    2. 条件渲染 3. 综述 4. 个人公众号 1. 概述 老话说的好:要锻炼逆向思维,人取我弃,人弃我取。 言归正传,今天我们来聊聊 VUE3 的条件渲染。 2. 条件渲染 2.1 v-if <body> <div id="myDiv...
  • React条件渲染&&列表渲染

    千次阅读 2021-10-31 23:07:31
    一、React条件渲染 某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容: 在vue中,我们会通过指令来控制:比如v-if、v-show; 在React中,所有的条件判断都和普通的JavaScript...
  • 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:if 在MINA中,我们用wx:if=”{{condition}}”来判断是否需要渲染该代码块: ”{{condition}}”> True 也可以用wx:elif和wx:else...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 141,027
精华内容 56,410
关键字:

条件渲染

友情链接: ActivityReCreate.zip