脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue v-if使用

vue中的v-if基本使用(最新推荐)

 更新时间：2022年12月07日 10:56:26   作者：兮动人  
v-if根据表达式的真假，切换元素的显示和隐藏操作DOM元素，这篇文章主要介绍了vue中的v-if基本使用,需要的朋友可以参考下

vue中的v-if基本使用

v-if：根据表达式的真假，切换元素的显示和隐藏（操作DOM元素）

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">兮动人</p>
        <p v-show="isShow">兮动人 v-show 修饰</p>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            isShow: false
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

  • 通过控制台可以发现，v-show 的作用是把元素赋予 display:none 隐藏起来，而 v-if 是直接把元素给去掉
  • 案例：v-if 表达式应用
<body>
    <div id="app">
        <h2 v-if="age>=35">年龄大小</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            age: 40
            }
        })
    </script>
</body>

把上面age的默认值改为20，就显示不出了

补充知识：

vue中v-if的常见使用

使用过Vue的小伙伴一定使用过v-if 这个属性，但是这个属性主要是来干什么的呢,他得用途是那些？

这里我总结了一下，v-if使用一般有两个场景：

  • 1- 多个元素 通过条件判断展示或者隐藏某个元素。
  • 或者多个元素 2- 进行两个视图之间的切换

下面我写了两个例子，是Vue官方的简单实例。

第一个实例实现了 type等于不同值，A，B，C 三个元素的展示情况。第二个例子实现了，点击按钮实现两个视图的切换。

<!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">
    <title>Vue中v-if的常见使用</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){

    //创建一个vue实例
    var app = new Vue({
        el: '#app',
        data: {
            type:'C',
            loginType:'username'
        },
        methods:{
            changeloginType(){
                let self = this;
                if(self.loginType=='username'){
                    self.loginType = ''
                }else{
                    self.loginType = 'username'
                }
            }
        }
    })
}

</script>
<body>
    <div id="app">
        <div style="color:red">v-if的简单实用</div>
        <template>
            <div v-if="type == 'A'">
                A
            </div>
            <div v-else-if="type=='B'">
                B
            </div>
            <div v-else>
                C
            </div>
        </template>
        <div style="color:green">v-if的弹框切换</div>
        <template v-if="loginType === 'username'">
            <label>用户名：</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>密码：</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
        <button @click="changeloginType">切换状态</button>
    </div>
</body>
</html>

效果图：

到此这篇关于vue中的v-if基本使用的文章就介绍到这了,更多相关vue v-if使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue实现滑动超出指定距离回顶部功能

    vue实现滑动超出指定距离回顶部功能

    这篇文章主要为大家详细介绍了vue实现滑动超出指定距离回顶部功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 前端VUE双语实现方案详细教程

    前端VUE双语实现方案详细教程

    在项目需求中我们会遇到国际化的中英文切换,这篇文章主要给大家介绍了关于前端VUE双语实现方案的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • 基于Vue3+Three.js实现一个3D模型可视化编辑系统

    基于Vue3+Three.js实现一个3D模型可视化编辑系统

    这篇文章主要介绍了基于Vue3+Three.js实现一个3D模型可视化编辑系统,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • antd配置config-overrides.js文件的操作

    antd配置config-overrides.js文件的操作

    这篇文章主要介绍了antd配置config-overrides.js文件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue3动态路由addRoute实例详解

    vue3动态路由addRoute实例详解

    这篇文章主要介绍了vue3动态路由addRoute的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • nuxt框架中路由鉴权之Koa和Session的用法

    nuxt框架中路由鉴权之Koa和Session的用法

    后台管理页面需要有登录系统，所以考虑做一下路由鉴权，这篇文章主要介绍了nuxt框架中路由鉴权之Koa和Session的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue3中的props组件抽离

    vue3中的props组件抽离

    这篇文章主要介绍了vue3中的props组件抽离，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue二次封装axios流程详解

    Vue二次封装axios流程详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,下面这篇文章主要给大家介绍了关于Vue3引入axios封装接口的两种方法,需要的朋友可以参考下
    2022-10-10
  • Vue.js实现动画与过渡效果的示例代码

    Vue.js实现动画与过渡效果的示例代码

    在现代前端开发中,用户体验至关重要,一个精美的动画过渡不仅能提升界面的美观性,还能让用户在使用时感受到流畅的交互体验,在本文中,我们将深入探讨如何在 Vue.js 中实现动画与过渡效果,并提供示例代码,需要的朋友可以参考下
    2024-10-10
  • 浅谈vue加载优化策略

    浅谈vue加载优化策略

    这篇文章主要介绍了浅谈vue加载优化策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03

最新评论