Vue3手册译稿 - 基础 - 条件渲染

条件渲染

v-if

v-if用来根据条件渲染块元素。只有v-if结果为真时才会显示该块元素。<span v-if="awesome">Vue is awesome</span>
同时也可以添加v-else块:

<h1 v-if="awesome">Vue is awesome</h1>
<h1 v-else> Oh no :( </h1>

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>

以上代码放到一个完整例子里:

<html lang="en-US">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <title>vue demo1</title>
      <script src="https://unpkg.com/vue@next"></script>
     </head>
     <body>
        <div id="app">
            <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
            <span v-if="awesome">Vue is awesome</span>
            <h1 v-if="awesome">Vue is awesome</h1>
            <h1 v-else> Oh no :( </h1>
            <template v-if="awesome">
                <h1>标题</h1>
                <p>段落 1</p>
                <p>段落 2</p>
            </template>
        </div>
        <script type="text/javascript">
            Vue.createApp({
                data() {
                    return {
                        awesome: true
                    }
                }
            }).mount('#app')
        </script>
    </body>
</html>

v-else

你可以使用v-elsev-if添加一个else块:

<div v-if="Math.random() > 0.5">
  随机数大于0.5你就会看的见我!
</div>
<div v-else>
    随机数小于等于0.5你就会看见我!
</div>

v-else必须紧跟v-ifv-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-else一样,v-else-if必须紧跟v-ifv-else-if标签。

v-show

v-show是另一个控制标签显示的指令。使用方法基本上是一样的:

<h1 v-show="ok">你好吗?</h1>

不同点是:v-show的标签是一直存在DOM中,只是添加display属性控制显示或隐藏。v-show不支持应用在<template>标签上,也不支持v-else一起使用。v-if是“真正”的条件渲染,它会销毁和重新创建DOM元素及事件监听。v-if也是懒加载的:如果初始化渲染时条件是假,则不会做任何事情 -- 除非当条件首次更新为真否则条件块(即应用的标签)是不会被渲染的。
相比而言,v-show简单的多 - 无论如何都会渲染标签,通过CSS(display)控制显示或隐藏罢了。
通俗的来说,v-if控制更新时消耗资源多,v-show首次渲染时消耗资源多。所以v-show适用于经常更新状态,v-if适用条件不会在运行时更新场景。

v-ifv-for

[warning] 不推荐v-ifv-for同时使用。参考样式手册获取更多信息。

v-ifv-for同时应用在一个标签上时,v-if会优先运算。参考列表渲染手册查看详情。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueVue3都可以使用`vue-seamless-scroll`无缝滚动组件。下面是使用`vue-seamless-scroll`的步骤。 在Vue中,使用`vue-seamless-scroll`的步骤如下: 1. 引入组件:在需要使用无缝滚动的组件中,通过`import`语句引入`vue-seamless-scroll`组件。 2. 注册组件:在组件的`components`属性中注册`vue-seamless-scroll`组件。 3. 使用组件:在模板中使用`<vue-seamless-scroll></vue-seamless-scroll>`标签来调用`vue-seamless-scroll`组件。 在Vue3中,使用`vue3-seamless-scroll`的步骤如下: 1. 安装相关依赖:使用npm或yarn安装`vue3-seamless-scroll`组件。 2. 全局引入组件:在主文件中,使用`import`语句引入`vue3-seamless-scroll`组件,并通过`app.use()`方法全局注册组件。 3. 使用组件:在需要使用无缝滚动的组件中,使用`<vue3-seamless-scroll></vue3-seamless-scroll>`标签来调用`vue3-seamless-scroll`组件。 需要注意的是,VueVue3在使用`vue-seamless-scroll`时的引入方式和注册方式有所不同。在Vue中,通过`import`和`Vue.use()`来引入和注册组件,而在Vue3中,需要使用`import`和`app.use()`来引入和注册组件。 相关问题: 1. `vue-seamless-scroll`是什么?它有什么作用? 2. 如何在Vue中使用`vue-seamless-scroll`组件? 3. 如何在Vue3中使用`vue3-seamless-scroll`组件? 4. 除了`vue-seamless-scroll`,还有哪些可以实现无缝滚动效果的Vue插件或组件?<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值