文章目录

1. 绑定样式
- 1.1 绑定 class 样式
- 1.2 绑定 style 样式
2. 条件渲染
- 2.1 v-show
- 2.2 v-if
3. 列表渲染

1. 绑定样式

说绑定样式前，先准备好以下几个样式 :

 <style>
        .basic {
    
    
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        /* happy , sad , normal 三选一 */

        .happy {
    
    
            渐变 : 
            background-image: linear-gradient(180deg, rgb(247, 132, 132), rgb(241, 241, 80));
        }

        .sad {
    
    
            背景
            background-color: gray;
            
            边框
            border: 3px dashed green;
        }

        .normal {
    
    
            背景颜色
            background-color: skyblue;
        }

        .test1 {
    
    
            背景颜色
            background-color: rgb(140, 244, 195);
        }

        .test2 {
    
    
           字体大小
            font-size: 50px;
            字体阴影
            text-shadow: 2px 2px 5px red;
        }

        .test3 {
    
    
            圆角边框
            border-radius: 20px;
            background-color: yellow
        }
    </style>

关于这些样式，可以在：CSS 教程 (w3school.com.cn) 上学习到 .

1.1 绑定 class 样式

下面就开始学习 vue 中的绑定样式

在这里插入图片描述

注意当前相当于在操作字符串，这种绑定class 样式适用于样式的类名不确定，需要动态指定 .

下面升级一下： changeMood 方法，让他支持随机切换样式，即当前 a 的值可以是 happy ，也可以是 sad ，还可以是 normal (注意：是其中的一个).

做法很简单：写一个数组存放 happy ，sad ， normal ，然后借助随机数通过这个随机数，就可以指定下标，然后通过下标返回值即可 .

关于 random 不多说，不清楚可以看： JavaScript 随机 (w3school.com.cn)

代码如下：效果 , 可以自己尝试实现以下 ,然后观察 .

<!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>绑定样式</title>
    <script src="../../js/vue.js"></script>
    <style>
        .basic {
      
      
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        /* happy , sad , normal 三选一 */

        .happy {
      
      
            background-image: linear-gradient(180deg, rgb(247, 132, 132), rgb(241, 241, 80));
        }

        .sad {
      
      
            background-color: gray;
            border: 3px dashed green;
        }

        .normal {
      
      
            background-color: skyblue;
        }

        .test1 {
      
      
            background-color: rgb(140, 244, 195);
        }

        .test2 {
      
      
            font-size: 50px;
            text-shadow: 2px 2px 5px red;
        }

        .test3 {
      
      
            border-radius: 20px;
            background-color: yellow
        }
    </style>

</head>

<body>
    <div id="root">
        <div class='basic' :class="a" @click="changeMood">{
   
   {name}}</div>
    </div>

    <script>
        new Vue({
      
      
            el: "#root",
            data: {
      
      
                name: "迪迦",
                a: "normal"
            },
            methods: {
      
      
                changeMood() {
      
      

                    let arr = ['happy', 'sad', 'normal']

                    let index = Math.floor(Math.random() * 3)

                    this.a = arr[index]
                }
            }
        })
    </script>

</body>

</html>

绑定 class 样式数组写法，适用场景要绑定的样式不确定，需要动态指定

在这里插入图片描述

绑定class 样式，对象写法，适用于：绑定的样式个数确定，名字也确定，但要动态决定用不用

在这里插入图片描述

看完绑定 class ，下面来看看如何绑定内联的 style .

1.2 绑定 style 样式

在这里插入图片描述

补充一下：用的少，这里 :style = " " ， " " 里面除了写对象，也可以写数组 .

在这里插入图片描述

总结：

绑定样式 :

class 样式

a. 写法： class = “xxx” , xxx 可以是字符串，对象，数组

b. 字符串写法使用与：类名不确定，要动态获取

c. 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定

d. 数组写法适用于：要绑定多个样式，个数确定，名字也确定，当不确定用不用 .
style 样式

a. :style="{fontSize : xxx}" 其中 xxx 是动态值

b. :style = "[a,b]" 其中 a , b 是样式对象

2. 条件渲染

条件渲染 : 顾名思义，符合了某些条件，就渲染某些东西

2.1 v-show

在这里插入图片描述

2.2 v-if

在这里插入图片描述

下面就可以通过 v-show 或 v-if 写一个小交互 :

在这里插入图片描述

下面继续，想一想既然有 v-if ，那么 v-else-if 和 v-else 肯定是少不了的

之前我们如何使用 if else if , else ，那么 v-if ， v-else-if , v-else 就如何使用 .

在这里插入图片描述

看完了 v-else-if , v-else , 下面来补充一个标签 template

在这里插入图片描述

总结：

条件渲染：

v-if

写法： 1. v-if = “表达式” , 2. v-else-if = “表达式” , 3. v-else （这里也可以写表达式）

适用于：切换频率较低的场景

特点 : 不展示的DOM元素直接被移除

注意 : v-if 可以和：v-else-if ， v-else 一起使用，但要求结构不能被 “打断” .
v-show

写法 : v-show=“表达式”,

适用于 : 切换频率较高的场景.

特点 : 不展示的 DOM 元素未被移除 , 仅仅是使用样式隐藏掉
备注使用 v- if 的时候，元素可能无法获取到 (v-if=“false” ，当前DOM 元素就被移除了)，而使用 v-show 一定可以获取到

3. 列表渲染

3.1 v-for

1. 遍历数组 :

在这里插入图片描述

看完了遍历数组，下面来看看如何使用 v-for 遍历对象

2. 遍历对象

在这里插入图片描述

除了数组，对象， v-for 还能遍历字符串，用的不多，了解即可

3. 遍历字符串

在这里插入图片描述

最后来看一个比遍历字符串用的还少的，指定遍历的次数

4. 指定遍历次数

在这里插入图片描述

总结：

v-for指令 :

用于展示列表数据
语法： v-for = "(item,index) in xxx" :key = "yyy"
可遍历 : 数组，对象，字符串 (用的很少) , 指定次数 (用的很少) .

3.2 key 的作用与原理

上面说 v-for 中的 key 是让每个 li 拥有唯一的 id ，这里就来细说一下，key 的作用和原理

图一：

在这里插入图片描述

图二：

在这里插入图片描述

这里补充一下：如果写 v-for 遍历列表的时候，没有写 key vue 会做一个默认的动作，会将遍历时的索引值(下标) 自动作为key ，这也是为啥之前没写 key 也出错的原因.

总结

面试题： react ， vue 中的 key 有什么作用 ? （key 的内部原理）

虚拟 DOM 中的key 的作用 :

a. key 是虚拟 DOM 对象的标识，当状态中的数据发生变化时， Vue 会根据 新数据 生成 新的虚拟DOM 随后 Vue 进行 新虚拟 DOM 与 旧虚拟 DOM 的差异比较。比较规则如下：
对比规则 :

a. 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key :
- 若旧虚拟 DOM 中内容没变，直接使用之前的真实 DOM ！
- 若虚拟 DOM 中内容变了，则生成新的真实 DOM ，随后替换掉页面中之间的真实 DOM 。
b. 旧虚拟 DOM中未找到与新虚拟 DOM 相同的key
- 创建新的真实 DOM ，随后渲染到页面上
用 index 作为 key 可能会引发的问题 :

a. 若对数据进行 : 逆序添加，逆序删除等破坏顺序操作 : 会产生没必要的真实 DOM 根性 --> 界面效果没问题，但效率低.

b. 如果结构中还包含输入类的 DOM ：会产生错误 DOM 更新 —> 界面有问题
开发中如何选着 key ?

a.最好使用每条数据的唯一标识作为 key ，比如 id ，手机号，身份证，学号等唯一值.

b.如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为 key 是没问题的。