【vue】条件判断（v-if）和循环遍历（v-for）

最新推荐文章于 2024-05-15 18:27:31 发布

-4444x-

最新推荐文章于 2024-05-15 18:27:31 发布

阅读量5.9k

点赞数 2

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43490212/article/details/113463769

版权

vue.js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

一：条件判断

v-if

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

<div id="app">
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <div v-if="flag">
           如果flag为true则显示,false不显示!
            <div>{{msg}} </div>
        	<div>{{msg}} </div>
        	<div>{{msg}} </div>
        	<div>{{msg}} </div>
        </div>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
        	msg: '你好呀，我很好，好好学习，天天向上',
            flag:true
        }
    })
</script>

v-if和v-else

<body>
    <!-- 1:提供接收Vue数据的容器 -->
    <div id='app'>
        <h1 v-if="flag">
            <div>zhaoxiaozhao</div>
            <div>zhaoxiaozhao</div>
            <div>zhaoxiaozhao</div>
        </h1>
        <h2 v-else>
            <div>此时flag为false，所以我就显示了</div>
        </h2>
    </div>


    <!-- 2:导入vue.js文件 -->
    <script src='../js/vue.js'></script>


    <!-- 3:使用Vue语法 -->
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {}
        })
    </script>
</body>

在这里插入图片描述

v-if和v-else-if

<body>
    <!-- 1:提供接收Vue数据的容器 -->
    <div id='app'>
        <div v-if="score>=90">优秀</div>
        <div v-else-if="score>=80">良好</div>
        <div v-else-if="score>=70">及格</div>
        <div v-else>差</div>

    </div>


    <!-- 2:导入vue.js文件 -->
    <script src='../js/vue.js'></script>


    <!-- 3:使用Vue语法 -->
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                score: 20
            },
            methods: {}
        })
    </script>
</body>

推荐使用：

computed: {
    result() {
        let grading = ''
        if (this.score >= 90) {
            grading = '优秀'
        } else if (this.score >= 80) {
            grading = '良好'
        } else if (this.score >= 70) {
            grading = '及格'
        }
        else {
            grading = '差'
        }
        return grading
    }
}

v-if和v-show

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

v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢?
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择呢?
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if

二：循环结构

v-for

<body>
    <!-- 1:提供接收Vue数据的容器 -->
    <div id='app'>
        <ul>
            <!-- 如果获取一个值，则是value -->
            <li v-for="item in info">{{item}}</li>
            <br>
            <!-- 如果获取两个，value，key -->
            <li v-for="(item,key) in info">{{key}} ：{{item}}</li>
            <br>
            <!-- 也可以获取索引值 -->
            <li v-for="(item,key,index) in info">{{index}}.{{key}} ：{{item}}</li>
        </ul>
    </div>


    <!-- 2:导入vue.js文件 -->
    <script src='../js/vue.js'></script>


    <!-- 3:使用Vue语法 -->
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                info: {
                    name: 'zhao',
                    age: '18',
                    tel: '563225871'
                }
            },
            methods: {}
        })
    </script>
</body>

组件key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢（了解）)?
这个其实和Vue的虚拟DOM的Diff算法有关系。
这里我们借用React’ s diff algorithm中的一张图来简单说明一下:
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率?
所以我们需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。
所以一句话，key的作用主要是为了高效的更新虚拟DOM。

-4444x-

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【vue】条件判断（v-if）和循环遍历（v-for）

文章目录一：分支结构v-if一：分支结构v-if1：多个元素通过条件判断展示或者隐藏某个元素。或者多个元素2：进行两个视图之间的切换<div id="app">  <span v-if="flag"> 如果flag为true则显示,false不显示! </span></div><script&
复制链接

扫一扫

专栏目录