前面我们简单认识了一下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-if和v-else指令来根据条件渲染不同的内容。

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

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

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

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

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

注意

实际上，在Vue中，v-if和v-else指令不必在同级。

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

以下是一个示例，展示了v-if和v-else可以在不同父元素中使用：

html 复制代码

<template>
  <div>
    <div v-if="status">
      <h2>{{ time }}</h2>
    </div>
    <div v-else>
      <h2>{{ time2 }}</h2>
    </div>
  </div>
</template>

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

需要注意的是，当v-if和v-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是一个返回布尔值的表达式。如果condition为true，元素将显示；如果condition为false，元素将隐藏。

与`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-show或v-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>

vue语法，if和else怎么叛变了？

v-if和v-else

代码解释

注意

v-show

与v-if相比，v-show有以下特点：

实战用法

与`v-if`相比，`v-show`有以下特点：