Vue.js 条件判断，循环遍历，key，虚拟DOM

最好的人啊

已于 2022-09-01 11:35:27 修改

阅读量621

点赞数 1

分类专栏： Vue 文章标签： java 前端 servlet javascript vue.js

于 2022-08-02 20:37:13 首次发布

本文链接：https://blog.csdn.net/qq_52499703/article/details/126128370

版权

本文详细介绍了Vue.js中的条件判断，包括v-if、v-else-if、v-else和v-show的用法和区别。接着讲解了v-for循环遍历数组和对象，以及使用key的重要性，阐述了key在虚拟DOM中的作用，以及何时使用数据的唯一标识作为key。最后讨论了虚拟DOM的概念和其在性能优化中的角色。

摘要由CSDN通过智能技术生成

🚗个人主页：最好的人啊

🚌系列专栏：HTML/CSS

🚐推荐一款模拟面试、刷题神奇、从基础到大厂的面试题库，要想走上人生巅峰迎娶白富美赶快点击这个网站⚡不要犹豫，白富美在向你招手，快来注册吧！

一，条件判断

1，v-if

单独使用v-if，变量为布尔值，为true才渲染DOM

<h1 v-if="isScore"> v-if 这次测验熏悟空考了: {
  {score}}分</h1>

2，v-if ，v-else-if，v-else

联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。

        <h1 v-if="score<60">分数小于60分</h1>
        <h1 v-else-if="score<90">分数大于60分 小于90分</h1>
        <h1 v-else="">不及格</h1>

3，v-show

通过样式display:block来显示当值为假时，通过display:none来隐藏

  <h2 v-show="isShow">v-show 我只是隐藏了</h2>

4，v-if 与v-show的区别

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app"> 
        <!-- 当v-if的变量值为true时开始局部编译，渲染Dom节点，当值为false时 开始局部编译卸载元素，也就是删除这个Dom节点 -->
        <!-- v-show 的值也是布尔值 当值为真时，通过样式display:block来显示 当值为假时，通过display:none来隐藏 -->
        <h1 v-if="isScore"> v-if 这次测验熏悟空考了: {
  {score}}分</h1>
        
        <h2 v-show="isShow">v-show 我只是隐藏了</h2>
        <button @click="isScore=!isScore,isShow=!isShow">切换</button>
        <hr>
        <!-- 通常这三个v-if v-else-if v-else 一起配合使用 -->
        <h1 v-if="sco