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

1.绑定样式

1.1绑定class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
数组写法适用于：要绑定多个样式，但是不确定绑定哪几个，就写成数组，省的一个一个绑定。
对象写法适用于：要绑定多个样式，而且要动态决定用不用，这里面可以写一些判断的逻辑。

<div id="root">
    <!--   1. 绑定class样式--字符串写法，适用于样式的类名不确定，需要动态指定-->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>

    <!--   2. 绑定class样式--数组写法，适用于要绑定的样式个数不确定，名字也不确定-->
    <div class="basic" :class="classArr" @click="removeStyle3">{{name}}</div><br>

    <!--   3. 绑定class样式--对象写法，适用于要绑定的样式个数确定，名字也确定，要动态决定用不用-->
    <div class="basic" :class="classObj">{{name}}</div><br>
    <button @click="useStyle1">点击添加样式1</button>
    <button @click="useStyle2">点击添加样式2</button>

</div>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'zzy',
            mood: 'normal',
            classArr: ['style1', 'style2', 'style3'],
            classObj: {
                style1: false,
                style2: false
            }
        },
        methods: {
            changeMood() {
                // this.mood = 'happy';
                //点击实现随机切换样式
                const arr = ['happy', 'sad', 'normal'];
                const index = Math.floor(Math.random() * 3);  //获取0-3之间的整数不包括3
                this.mood = arr[index];
            },
            //点击去掉style3样式
            removeStyle3() {
                this.classArr.pop();
            },
            //点击添加样式1
            useStyle1() {
                this.classObj.style1 = true;
                // this.classObj.style2 = true;
            },
            //点击添加样式2
            useStyle2() {
                // this.classObj.style1 = true;
                this.classObj.style2 = true;
            }
        }
    })
</script>

2.绑定style样式

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

<!--    绑定style样式--对象写法-->
<div class="basic" :class="classArr" :style="styleObj" >{{name}}</div><br>
<!--    绑定style样式--数组写法（非常不常用）-->
<div class="basic" :class="classArr" :style="[styleObj,styleObj2]" >{{name}}</div>
<script>
new Vue({
    el:'#root',
    data: {
        name: 'zzy',
        styleObj:{
        	//驼峰命名法
            fontSize:'50px',
            color:'red'
        },
        styleObj2:{
     	   //驼峰命名法
            backgroundColor:'green'
        }
   }
})
</script>

2.条件渲染

2.1v-show

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

2.2v-if

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

<!-- 准备好一个容器 -->
<div id="root">

    <!-- 1.v-show="false" => 相当于display:none -->
    <h2 v-show="false">我的名字叫{{name}}</h2>
    <h2 v-show="1 === 3">我的名字叫{{name}}</h2>
    <!-- 等价于<h2 style="display: none;">我的名字叫{{name}}</h2> -->

    <!-- 2.v-if="false" => 彻底删除标签了 -->
    <h2 v-if="false">我的名字叫{{name}}</h2>
    <h2 v-if="1 === 3">我的名字叫{{name}}</h2>


    <!-- 实现功能：随着n递增展示不同的div -->
    <h2>{{n}}</h2>
    <button v-on:click="n++">点击n+1</button>

    <!-- 这里的v-if,v-else-if,v-else和基础js里的一样儿 -->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n === 3">Vue</div>
    <div v-else>zzy.js</div>

    <!-- v-if和template的配合使用(v-show不行)
    template不会影响页面结构，页面运行后会自动去掉，但是可以配合v-if控制多个元素整体显示
    而且不会影响css拿节点-->
    <template v-if="n === 1">
        <div>zzy1</div>
        <div>zzy2</div>
        <div>zzy3</div>
    </template>

</div>

<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'zzy',
            n: 0
        }
    })
</script>

3.列表渲染

3.1v-for

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

<div id="root">
        <h2>人员列表</h2>
        <!-- 遍历数组（用的多） -->
        <ul>
            <li v-for="p in persons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <!-- 遍历数组 -->
        <ul>
            <li v-for="(value,key) in car" :key="key">
                {{value}}-{{key}}
            </li>
        </ul>

        <!-- 遍历字符串(用的少) -->
        <ul>
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>

        <!-- 遍历指定次数（用的少） -->
        <ul>
            <li v-for="(num,index) in 5" :key="index">
                {{num}}-{{index}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    persons: [
                        { id: 001, name: '张三', age: 19 },
                        { id: 002, name: '李四', age: 18 },
                        { id: 003, name: '王五', age: 20 },
                    ],
                    car: {
                        name: '兰博基尼',
                        price: '一百万',
                        color: 'blue'
                    },
                    str: 'hello'
                }
            }
        })

3.2key的作用与原理（很关键）

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是没有问题的。

用一个案例来说明问题：
我要给数组头部添加一个人：

   <!-- 准备好一个容器 -->
    <div id="root">
        <h1>人员列表</h1>
        <button @click="add">点击添加老刘</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                <!-- 遍历数组的话，index是索引值，p是数组每个元素 -->
                {{p.name}}----{{p.age}}----{{index}}
                <input type="text">
            </li>
        </ul>
    </div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                persons: [
                    { id: 001, name: '张三', age: 23 },
                    { id: 002, name: '李四', age: 18 },
                    { id: 003, name: '王五', age: 10 }
                ]
            },
            methods: {
                add() {
                    const p = { id: 004, name: '老刘', age: 90 };
                    this.persons.unshift(p);
                }
            },
        })
    </script>

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

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

4.列表过滤：实现[模糊查询]

4.1使用watch瑕疵实现

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

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

<!-- 准备好一个容器 -->
<div id="root">
    <h1>人员列表</h1>
       <!-- <input type="text" placeholder="请输入关键字" v-model="keyword" @keyup.enter="search"> -->
       <input type="text" placeholder="请输入关键字" v-model="keyword">
    <ul>
        <li v-for="(p,index) in newPersons" :key="p.id">
            {{p.name}}----{{p.age}}----{{p.sex}}
        </li>
    </ul>
</div>

<script>
        const vm = new Vue({
            el: '#root',
            data: {
                keyword: '',
                persons: [
                        { id: 001, name: '马冬梅', age: 19, sex: '女' },
                        { id: 002, name: '周冬雨', age: 18, sex: '女' },
                        { id: 003, name: '周杰伦', age: 21, sex: '男' },
                        { id: 004, name: '温兆伦', age: 20, sex: '男' },
                    ],
                 newPersons: []
            },
            watch: {
                keyword: {
                    //页面上来由于newPersons是空，不会显示数据，想要让页面初始化就显示所有人，就要加个immediate: true
                    //这样就可以让handler函数初始化时先调用一次，由于开始keyword=''
                    // 而字符串里都包含空字符串，就可以先筛选出来，初始化所有人物信息
                    immediate: true,
                    handler(newVal, oldVal) {
                        this.newPersons = this.persons.filter((ele) => {
                            //判断keyword变化后的新值在不在每个对象的name中,并返回一个新的数组
                            return ele.name.includes(newVal);
                            //有个点要注意，字符串里面是有空字符串的
                        });
                    }
                }

        })
</script>

4.2使用computed完美实现

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

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

<!-- 准备好一个容器 -->
<div id="root">
    <h1>人员列表</h1>
    <!-- <input type="text" placeholder="请输入关键字" v-model="keyword" @keyup.enter="search"> -->
    <input type="text" placeholder="请输入关键字" v-model="keyword">
    <ul>
        <li v-for="(p,index) in newPersons" :key="p.id">
            {{p.name}}----{{p.age}}----{{p.sex}}
        </li>
    </ul>
</div>

<script>
    const vm = new Vue({
        el: '#root',
        data: {
            keyword: '',
            persons: [
                        { id: 001, name: '马冬梅', age: 19, sex: '女' },
                        { id: 002, name: '周冬雨', age: 18, sex: '女' },
                        { id: 003, name: '周杰伦', age: 21, sex: '男' },
                        { id: 004, name: '温兆伦', age: 20, sex: '男' },
                    ],
            //newPersons: []
        },
        computed: {
            newPersons: {
                get() {
                    return this.persons.filter((ele) => {
                        return ele.name.includes(this.keyword);
                    })
                }
            }
        }
    })
</script>

5.列表排序

先过滤，再排序

首先定义一个sortType属性来判断排序的种类，然后在计算属性里做一个判断。
注意这里仔细理解理解数组的sort方法，很奇怪。

这个案例再次体现出计算属性的强大之处，只要get里用到的数据（keyword，sortType）发生改变，get都会重新执行，模板都会重新解析，这个业务逻辑就实现了

<div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <!-- 遍历数组（用的多） -->
        <ul>
            <li v-for="p in filPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <!-- 用computed实现 -->
    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    keyWord: '',
                    sortType: 0, //0代表原顺序   1代表降序   2代表升序   
                    persons: [
                        { id: 001, name: '马冬梅', age: 19, sex: '女' },
                        { id: 002, name: '周冬雨', age: 18, sex: '女' },
                        { id: 003, name: '周杰伦', age: 21, sex: '男' },
                        { id: 004, name: '温兆伦', age: 20, sex: '男' },
                    ],
                }
            },
            computed: {
                filPersons() {
                    const arr = this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                    // 判断一下是否需要排序
                    if (this.sortType) {
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>

               return p.name.indexOf(this.keyWord) !== -1
                })
                // 判断一下是否需要排序
                if (this.sortType) {
                    arr.sort((p1, p2) => {
                        return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                    })
                }
                return arr
            }
        }
    })
</script>