• Vue（三）：样式绑定、条件渲染、列表渲染、列表过滤与列表排序

    一、样式绑定

    1、绑定class样式

    写法:class=“xxx” xxx可以是字符串、对象、数组。
    字符串写法适用于：要绑定的样式类名不确定，要动态获取。
    数组写法适用于：要绑定的样式不确定，个数也不确定
    对象写法适用于：要绑定得样式确定，个数确定，但是要动态决定要不要。

    2.     <div id="root">
    3.         
    4.         <div class="basic" :class="mood" @click="changeMood">{{name}}div>
    5.         
    6.         <div class="basic" :class="classArr">{{name}}div>
    7.         
    8.         <div class="basic" :class="classObj">{{name}}div>
    9.     div>
    10.     <script>
    11.         new Vue ({
    12.             el:'#root',
    13.             data:{
    14.                 name:'椰果',
    15.                 mood:'normal',
    16.                 classArr:['apple1','apple2','apple3'],
    17.                 classObj:{
    18.                     apple1:true,
    19.                     apple2:false
    20.                 }
    21.             },
    22.             methods: {
    23.                 changeMood(){
    24.                     // this.mood = 'happy'
    25.                     // 随机生成happy sad normal
    26.                     const arr = ['happy','sad','normal']
    27.                     const index = Math.floor(Math.random()*3)
    28.                     //Math.random只能取0-2但不包括2，所以*3之后再取整
    29.                     this.mood = arr[index]
    30.                 }
    31.             }
    32.         })
    33.     script>

    2、绑定style样式（不常用）

    :style="{fontSize: xxx + 'px'}"其中xxx是动态值。
    :style="[a,b]"其中a、b是样式对象

    2. <div class="basic" :class="classArr" :style="styleObj" >{{name}}div><br>
    4. <div class="basic" :class="classArr" :style="[styleObj,styleObj2]" >{{name}}div>
    5. <script>
    6. new Vue({
    7.     el:'#root',
    8.     data: {
    9.         name: 'zzy',
    10.         styleObj:{
    11.         	//驼峰命名法
    12.             fontSize:'50px',
    13.             color:'red'
    14.         },
    15.         styleObj2:{
    16.      	   //驼峰命名法
    17.             backgroundColor:'green'
    18.         }
    19.    }
    20. })
    21. script>

    3、总结

    绑定样式：

    1.class样式写法：class="xxx”xxx可以是字符串、对象、数组。

    字符串写法适用于：类名不确定，要动态获取。

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

    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

    2.style样式:

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

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

     

    二、条件渲染

    1、v-if与v-else

    写法:
    (1).v-if=“表达式”
    (2).v-else-if=“表达式”
    (3).v-else=“表达式”
    适用于：切换频率较低的场景。（因为会动DOM树，节点删来删去不太好）
    特点：不展示的DOM元素直接被移除。
    注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

    2、v-show

    写法：v-show=“表达式”
    适用于：切换频率较高的场景。（不会动DOM树，只是隐藏，相当于添加display:none）
    特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
    备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。这是因为v-if会一不小心把标签直接从页面上干掉，而v-show不会干掉，只会隐藏

    1.  
    2.     <div id="root">
    3.     <h2>当前的n值是:{{n}}h2>
    4.     <button @click="n++">点我n+1button>
    5.     
    6.     
    7.     
    8.  
    9.     
    10.     
    11.     
    12.  
    13.     
    14.     
    15.  
    16.     <template v-if = "n === 1">
    17.         
    18.         <h2>你好h2>
    19.         <h2>中文h2>
    20.         <h2>吃饭h2>
    21.     template>
    22.     div>
    23.     <script>
    24.         new Vue({
    25.             el: '#root',
    26.             data: {
    27.                 n:0
    28.             }
    29.         })
    30.     script>

    3、总结

    三、列表渲染

    1、v-for

    1、用于展示列表数据
    2、语法：v-for=“(item, index) in xxx” :key=“yyy”，其中xxx是遍历的目标，yyy是唯一的索引，用于区分每个嘎达
    3、可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
    4、遍历数组的话，index是索引值（唯一），p是数组每个元素
    5、遍历对象的话，index就是属性名（唯一），p是属性值

    1.     <div id="root">
    2.     
    3.     <h2>人员列表（用的多）h2>
    4.     <ul>
    5.         <li v-for="(p, index) of persons" :key="index">
    6.             {{p.name}}----{{p.age}}
    7.         li>
    8.     ul>
    9.     
    10.     <h2>汽车信息h2>
    11. <ul>
    12.     <li v-for="(value,k) of car" :key="k">
    13.         {{k}}----{{value}}
    14.     li>
    15. ul>
    16.     
    17.     <h2>测试遍历字符串（用得少）h2>
    18. <ul>
    19.     <li v-for="(char,index) of str" :key="index">
    20.         {{char}}----{{index}}
    21.     li>
    22. ul>
    23.     
    24.     <h2>测试遍历字符串（用得少）h2>
    25. <ul>
    26.     <li v-for="(number,index) of 5" :key="index">
    27.         {{number}}----{{index}}
    28.     li>
    29. ul>
    30.     div>
    31.     <script>
    32.         new Vue({
    33.             el: '#root',
    34.             data: {
    35.                 persons:[
    36.                     { id: '001', name: '张三', age: '18'},
    37.                     { id: '002', name: '李四', age: '19'},
    38.                     { id: '003', name: '王五', age: '20'}
    39.                 ],
    40.                 car:{
    41.                     name:'奥迪a8',
    42.                     price:'800000',
    43.                     color:'black'
    44.                 },
    45.                 str:'cgp'
    46.             }
    47.         })
    48.     script>

    2、key作用与原理

    key可以有三种情况：写唯一标识、写index、不写。其中唯一标识最合适，如果不写会默认是写index

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

    1、 虚拟DOM中key的作用：
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较（diff算法），比较规则如下：

    2、对比规则：
    （1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
    ① 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
    ② 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
    （2）旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。

    3、 用index作为key可能会引发的问题：
    （1）若对数据进行：逆序添加、逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新 => 界面效果没问题, 但效率低。
    （2） 如果结构中还包含输入类的DOM：
    会产生错误DOM更新 => 界面有问题。

    4、 开发中如何选择key?:
    （1）最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
    （2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

    例如：给一个数组的最上面添加一组数据

    1.    
    2.     <div id="root">
    3.         <h1>人员列表h1>
    4.         <button @click="add">点击添加老刘button>
    5.         <ul>
    6.             <li v-for="(p,index) in persons" :key="p.id">
    7.                 
    8.                 {{p.name}}----{{p.age}}----{{index}}
    9.                 <input type="text">
    10.             li>
    11.         ul>
    12.     div>
    13.  
    14.     <script>
    15.         const vm = new Vue({
    16.             el: '#root',
    17.             data: {
    18.                 persons: [
    19.                     { id: 001, name: '张三', age: 23 },
    20.                     { id: 002, name: '李四', age: 18 },
    21.                     { id: 003, name: '王五', age: 10 }
    22.                 ]
    23.             },
    24.             methods: {
    25.                 add() {
    26.                     const p = { id: 004, name: '老刘', age: 90 };
    27.                     this.persons.unshift(p);
    28.                 }
    29.             },
    30.         })
    31.     script>

     遍历列表时key的作用（index作为key）：

    遍历列表时key的作用（唯一标识作为key）：

    四、列表过滤

    1.使用methods粗略实现


    这是我一开始自己琢磨出来的一个办法，给input绑定事件，按下回车键后执行search方法。定义一个newPersons来保证搜索不会越搜越少。但是这种写法会有几个问题：
    1、页面上来是没有任何东西的，因为newPersons是空数组，还没有执行search方法进行过滤赋值
    2、即使不输入内容，按下回车也不能初始化，因为数组里不包含空字符串（字符串包含空字符串，数组不包含）

    2. <div id="root">
    3.     <h1>人员列表h1>
    4.      <input type="text" placeholder="请输入关键字" v-model="keyword" @keyup.enter="search"> 
    5.     <ul>
    6.         <li v-for="(p,index) in newPersons" :key="p.id">
    7.             {{p.name}}----{{p.age}}----{{p.sex}}
    8.         li>
    9.     ul>
    10. div>
    11.  
    12. <script>
    13.         const vm = new Vue({
    14.             el: '#root',
    15.             data: {
    16.                 keyword: '',
    17.                 persons: [
    18.                     { id: 001, name: '冯万宁儿', age: 23, sex: '男' },
    19.                     { id: 002, name: '屁及万儿', age: 18, sex: '男' },
    20.                     { id: 003, name: '及丽热巴', age: 10, sex: '女' },
    21.                     { id: 004, name: '冯小刚儿', age: 60, sex: '男' }
    22.                 ],
    23.                  newPersons: []
    24.             },
    25.             methods: {
    26.                 search() {
    27.                     this.newPersons = this.persons.filter((ele, index) => {
    28.                         const arr = ele.name.split('');    //先把每个对象的name分割为数组
    29.                         //数组里是不包含空字符串的，所以这样如果keyword=''是筛不出来东西的
    30.                         const flag = arr.includes(this.keyword);   //判断数组中是否包含当前vue中的keyword
    31.                         return flag;   //筛选出来包含keyword的对象,组成一个新数组
    32.                     })
    33.                 }
    34.             },
    35.  
    36.         })
    37. script>

    2.使用watch瑕疵实现


    使用watch就可以避免上述问题，上面的筛选算法正确写法应该是用includs或者indexOf来判断当前keyword的值是否在name字符串中，这样就可以避免输入框为空值也不显示所有信息的问题。

    但是有个瑕疵：handler函数必须在keyword被改变时才执行，也就是说页面上来还是没有信息的，必须手动输入个东西再删掉（手动改变keyword），才能执行handler函数，才能显示所有人物的信息，所以必须加个属性immediate: true,才能默认初始化先调用handler，这样就能实现上来就显示所有人物的信息（最开始keyword=''）

    3.     
      人员列表
    4.        
    5.        
    6.     
      •
    7. {{p.name}}----{{p.age}}----{{p.sex}}

    • 3.使用computed完美实现


    使用计算属性可以解决watch中的一些繁琐写法，也不用在data中再新定义一个空数组newPersons。

    计算属性和监视属性最大的区别就是handler函数是被监视的属性更改时执行，而get是属性被读取时就执行，所以页面加载时newPersons被读取直接就调用get函数返回了一个被筛选后的新数组（条件是name包含空字符串），之后每次keyword改动都会导致Vue模板重新解析，get重新调用，不错

     

    3.     
      人员列表
    4.     
    5.     
    6.     
      •         
      •             {{p.name}}----{{p.age}}----{{p.sex}}
      •         
      •     
      •

      五、列表排序 

      先过滤，再排序
      首先定义一个sortType属性来判断排序的种类，然后在计算属性里做一个判断。
      注意这里仔细理解理解数组的sort方法，很奇怪。
      这个案例再次体现出计算属性的强大之处，只要get里用到的数据（keyword，sortType）发生改变，get都会重新执行，模板都会重新解析，这个业务逻辑就实现了

      2. <div id="root">
      3.     <h1>人员列表h1>
      4.     <input type="text" placeholder="请输入关键字" v-model="keyword">
      5.     <button @click="sortType = 0">原顺序button>
      6.     <button @click="sortType = 1">年龄降序button>
      7.     <button @click="sortType = 2">年龄升序button>
      8.     <ul>
      9.         <li v-for="(p,index) in newPersons" :key="p.id">
      10.             {{p.name}}----{{p.age}}----{{p.sex}}
      11.         li>
      12.     ul>
      13. div>
      14.  
      15. <script>
      16.     const vm = new Vue({
      17.         el: '#root',
      18.         data: {
      19.             sortType: 0,   //0原顺序，1年龄降序，2年龄升序
      20.             keyword: '',
      21.             persons: [
      22.                 { id: 001, name: '冯万宁儿', age: 23, sex: '男' },
      23.                 { id: 002, name: '屁及万儿', age: 18, sex: '男' },
      24.                 { id: 003, name: '及丽热巴', age: 10, sex: '女' },
      25.                 { id: 004, name: '冯小刚儿', age: 60, sex: '男' }
      26.             ],
      27.         },
      28.         computed: {
      29.             newPersons() {
      30.                 //先过滤，再排序
      31.                 const arr = this.persons.filter((ele) => {
      32.                     return ele.name.includes(this.keyword);
      33.                 });
      34.  
      35.                 // 或者if(this.sortType)
      36.                 if (this.sortType !== 0) {
      37.                     arr.sort((a, b) => this.sortType === 1 ? b.age - a.age : a.age - b.age);
      38.                 }
      39.                 return arr;
      40.             }
      41.         }
      42.     })
      43. script>

      （看完视频之后多加练习在敲一遍）

    7. 相关阅读:
      安全和便捷：如何将运营商二要素API应用于实名制管理中
      2023年9月青少年软件编程（Python） 等级考试试卷（一级）
      结尾：编程指南
      MySQL - mvcc
      python函数中*args和**kwargs的作用和意义
      Servlet概述及接口
      【JavaScript高级】手写apply()、call()、bind()
      Qt中常见的文件操作
      ES6之函数的扩展二
      基于SSM 离退休管理平台-计算机毕设 附源码 52629
    8. 原文地址：https://blog.csdn.net/m0_73560798/article/details/136616998