Vue.js05_vue.js:635-CSDN博客

本文链接：https://blog.csdn.net/qq_59142649/article/details/121686233

一、条件指令

（一）v-if

原理：v-if后面的条件为false时，对应的条件极其子元素不会渲染

格式：v-if="true"//能够渲染

v-if="false"//不能渲染

<body>
    <div id="app">
        <h2 v-if="false">{{message}}</h2>//不能渲染
        <h2 v-if="true">{{message}}</h2>//不能渲染
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: {
               message:'hello'
            },
        })
    </script>
</body>

（二）v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块 ,后面不需要跟任何条件

<body>
    <div id="app">
        <h2 v-if="isshow">{{message}}</h2>//不能渲染
        <h2 v-else>isshow为false时显示我</h2>//v-if为fase时显示
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: {
               message:'hello';
               isshow: true;
            },
        })
    </script>
</body>

（三）v-else-if

v-else-if用作 v-if 的 else-if 块。可以链式的多次使用

<body>
    <div id="app">
        <h2 v-if="score>=90">优秀</h2>
        <h2 v-else-if="score>=80">良好</h2>
        <h2 v-else-if="score>=60">及格</h2>
        <h2 v-else>不及格</h2>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: {
               score: 99
            },
        })
    </script>
</body>

二、v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染

<body>
    <div id="app">
        <h2 v-show="isshow">{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: {
               message:'hello';
               isshow: true;
            },
        })
    </script>
</body>

v-if与v-show的区别

1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被

渲染，条件为假，元素会被销毁）；

2. v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；

3. v-if 有更高的切换开销，v-show 切换开销小；

4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有；

5. v-if 可以搭配 template 使用，而 v-show 不行。

v-if与v-show的选择

1.当需要在显示与隐藏之间切片很频繁时，使用v-show

2.当只有一次切换时，使用v-if

三、v-for

（一）v-for遍历数组和对象

当有一组数据进行渲染时，可以使用v-for
格式：v-for="item in items"(遍历过程中不需要使用索引值)

v-for="(item,index) in items"(遍历过程中需要获取数组的索引值)

1.遍历数组

<body>
    <div id="app">
        <!--1.在遍历过程中，没有使用索引值-->
        <ul>
            <li v-for="item in names">{{item}}</li>
        </ul>

        <!--2.在遍历过程中，获取索引值-->
        <ul>
            <li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: {
              names:['xiaoming','xiaohong','xiaogang','xiaowang'] 
            },
        })
    </script>
</body>

2.遍历对象

<body>
    <div id="app">
        <!--1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
        <ul>
            <li v-for="item in info">{{item}}</li>
        </ul>

        <!--2.获取key和value   格式:(value,key)-->
        <ul>
            <li v-for="(value,key) in info">{{value}}-{{key}}</li>
        </ul>

        <!--2.获取key、value 、index  格式:(value,key)-->
        <ul>
            <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: {
              info:{
                name:'xiaohong',
                age:18,
                height:1.60,

              } 
            },
        })
    </script>
</body>