vue语法,if和else怎么叛变了?

前面我们简单认识了一下vue,讲的还算全面,这次就先来学一下它的简单指令的用法吧!

v-if和v-else

html 复制代码
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2 v-if="status">{{time}}</h2>  <!-- status为true页面就会显示 --> 
        <h2 v-else>{{time2}}</h2>
        
        <button @click="change">切换</button>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            template:'#my-app',
            data(){
                return{
                 time:'2023-12-8',
                 time2:'2023年12月8日',
                 status:true
                }
            },
            methods:{
                change(){
                    this.status=!this.status
                }
            }
        })
        app.mount('#app')
    </script>
</body>

代码解释

这段代码是一个使用Vue 3创建的简单示例,展示了如何在模板中使用v-ifv-else指令来根据条件渲染不同的内容。

首先,在HTML中定义了一个<div>元素,作为Vue应用的挂载点。然后,使用<template>元素定义了一个Vue组件的模板,并将其ID设置为my-app

在Vue组件中,使用data()方法定义了一个包含三个属性的数据对象。这三个属性分别是timetime2status

在模板中,使用v-ifv-else指令来判断status的值,并根据其值来显示不同的内容。当statustrue时,页面会显示<h2>{{time}}</h2>元素,否则会显示<h2>{{time2}}</h2>元素。

同时,还定义了一个按钮,并使用@click指令将它的点击事件绑定到change方法上。该方法会在每次点击按钮时,将status属性的值取反。

最后,在Vue实例中,使用createApp()方法创建了一个Vue实例,并将其挂载到HTML中定义的<div>元素上。

注意

实际上,在Vue中,v-ifv-else指令不必在同级。

Vue的条件渲染指令v-ifv-else可以用于在模板中根据条件选择性地渲染元素。它们可以出现在同一个父元素内,也可以分别出现在不同的父元素内。

以下是一个示例,展示了v-ifv-else可以在不同父元素中使用:

html 复制代码
<template>
  <div>
    <div v-if="status">
      <h2>{{ time }}</h2>
    </div>
    <div v-else>
      <h2>{{ time2 }}</h2>
    </div>
  </div>
</template>

在这个示例中,v-ifv-else分别出现在两个不同的<div>元素中。根据status的值,只有一个<div>会被渲染到页面上。

需要注意的是,当v-ifv-else出现在不同父元素内时,它们之间不能有其他元素,否则会导致编译错误。但是,如果它们在同一父元素内,则没有这种限制。

v-show

v-show是Vue中的一个条件渲染指令,用于根据条件决定元素是否显示。与v-if不同,v-show通过控制元素的display CSS属性来隐藏或显示元素,而不是直接从DOM中添加或删除元素。

使用v-show的语法如下:

html 复制代码
<div v-show="condition">Content to show/hide</div>

其中,condition是一个返回布尔值的表达式。如果conditiontrue,元素将显示;如果conditionfalse,元素将隐藏。

v-if相比,v-show有以下特点:

  • v-show的初始渲染开销较高,因为元素始终保留在DOM中,只是通过CSS的display属性进行切换。而v-if则在条件为false时,会完全从DOM中移除元素。
  • v-show在切换时不会触发重新编译和销毁/创建组件的过程,因此在频繁切换可见性的情况下,v-show的性能可能更好。
  • v-show不能在<template>标签上使用,而v-if可以。
  • v-show适用于需要频繁切换可见性的情况,而v-if适用于在运行时条件可能不经常改变的情况。

需要注意的是,由于v-show只是通过CSS属性来隐藏或显示元素,并没有从DOM中移除,因此在某些情况下可能会对页面布局和性能产生影响。因此,根据实际需求和场景,选择v-showv-if来进行条件渲染。

实战用法

这比上面最长的代码多添加了一次切换日期样式并使用了v-show。

html 复制代码
<body>
    
     <div id="app"></div>
    <template id="my-app">
      <h2 v-if="status===1">{{time}}</h2>  
      <h2 v-else-if="status===2">{{time2}}</h2>
      <h2 v-else="status===3">{{time3}}</h2>
        
        <button @click="change">切换</button> 
        <h2 @click="hide" v-show="show">{{time}}</h2>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            template:'#my-app',
            data(){
                return{
                 time:'2023-12-8',
                 time2:'2023年12月8日',
                 time3:'2023/12/8',
                 status:1,
                 show:true
                }
            },
            methods:{
                 change(){
                    if(this.status===3){
                        this.status=0  //v-if是DOM直接消失
                    }
                    this.status++
                }, 
                hide(){
                    this.show = false  //v-show是css层面的消失
                }
            }
        })
        app.mount('#app')
    </script>
</body>
相关推荐
web前端神器1 分钟前
指定阿里镜像原理
前端
枷锁—sha6 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha8 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜23 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2437 分钟前
html复习
javascript·microsoft·html
汉得数字平台41 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法