v-if/v-if-else/v-show

最新推荐文章于 2023-01-09 20:26:18 发布

冰雪奇缘lb

最新推荐文章于 2023-01-09 20:26:18 发布

阅读量410

点赞数

分类专栏： Vue 文章标签： v-if-else/v-show

本文链接：https://blog.csdn.net/weixin_44682587/article/details/102988708

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

v-if/v-if-else

vue中的v-if，v-else-if，v-else的逻辑原理和java以及其他便成为语言一样，只不过用法有点奇怪，前面需要带一个v-，用习惯就可以了，下面我们来看看v-show，
在这里插入图片描述
可以根据以下的代码进行测试v-show的使用，例如：网络连接错误：440 网络连接成功：250当条件满足时，标签存在，当条件为假时，标签直接不存在。也就是切换元素的display css属性。当条件变化时该指令触发过渡效果。
具体用法可以参考以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue cdn</title>
</head>

<body>
    <div id="vue-app">
        <h1>v-if指令</h1>
        <button @click="error = !error">error</button>
        <button @click="success = !success">success</button>
        <!-- <p v-if="error">error:如果条件为真，那么显示</p>
        <p v-else-if="success">success:如果条件为真，那么显示</p>
        <p v-else>others</p> -->
        <!--v-show-->
        <p v-show="error">网络连接错误：440</p>
        <p v-show="success">网络连接成功：250</p>
    </div>

</body>
<script>
    new Vue({
        el: '#vue-app',
        data() {
            return {
                error: false,
                success: false,
            };
        },
        methods: {},
        computed: {},
    });
</script>

</html>