uniApp学习与使用笔记

v-if判断是否显示内容

当我们需要使用 v-if 来对盒子或者内容进行显示或隐藏，一般使用data中的参数的布尔值来判断。

<template>
        <view>
            <view v-if="seen">现在你看到我了</view>
        </view>
</template>
    <script>
        export default {
            data() {
                return {
                    seen: true
                }
            }
        }
    </script>

当seen的值为“true”时，页面上才能看到盒子的内容。反之，盒子不被渲染。

当需要通过后端获取到的数据来判断内容是否显示时，通过下面的方式来达到目的：

<view v-if="item.topping == 'true'" >//item是v-for循环得到的

</view>

v-if 和 v-show 区别

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

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

相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，来控制元素的显示和隐藏。

根据应用场景选择

• v-if 有更高的切换开销，如果在运行时条件很少改变，则使用 v-if 较好。
• v-show 有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好。

注意

• 不推荐同时使用 v-if 和 v-for。
• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。