Vue2 第五节 class与style绑定，条件渲染和列表渲染

1.class与style绑定

2.条件渲染

3.列表渲染

一.class与style绑定

（1）绑定class

就是用v-bind绑定一个class

有三种不同的写法

1. 字符串写法：适用于样式的类名不确定，需要动态指定

 

 2.数组写法：适用于要绑定的个数个名字都不确定，数组中的样式连同class里面有的样式都会绑定到div中

 

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

如果要用，就将配置项改为true

 如果将两个配置项都改为true

(2) 绑定style

1.对象写法

 

 

 2.数组写法

 

 注意：对象写法和数组写法里面的属性字段不能瞎写，需要使用下划线转驼峰的写法

比如font-size要写成fontSize, background-color要写成backgroundColor

二.条件渲染

（1）v-show

（2）v-if  v-else-if   v-else

v-show

① 写法：v-show="表达式"

<h2 v-show="1 === 3">欢迎来到尚硅谷</h2>

② 适用于：切换频率比较高的场景

③ 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

 

v-if

① 写法：v-if="表达式"    v-else-if="表达式"  v-else="表达式"

<h2 v-if="false">欢迎来到尚硅谷</h2>

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

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

④ 注意：v-if可以和v-else-if  v-else一起使用，但是结构不能被打断

        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 1">React</div>
        <!-- 前面条件都不符合 -->
        <div v-else>Vue</div>

⑤ 注意：使用v-if的时候，元素可能无法获取到，而使用v-show一定能获取到

⑥ 注意：template 只能和v-if配合使用,v-show无效

        <template v-if="n === 1">
            <h2>你好</h2>
            <h2>你好</h2>
            <h2>你好</h2>
        </template>

三.列表渲染

（1）v-for指令

• 用于展示列表数据
• 语法：v-for="(item, index) in xxx" :key="yyy"   key下一篇专门写原理
• 可以遍历数组，对象，字符串（用的比较少），指定次数（用的很少）
• 遍历数组:p对应的就是数组里面的值,index对应数组的下标
• 遍历对应：val是属性值，k是属性名
• 遍历字符串：char表示字符串中的每个字符，index表示字符串的下标
• 遍历指定次数：index表示下标（从0开始），number表示值

<!-- 遍历数组 -->
<ul>
   <li v-for="(p,index) of persons" :key="index">
       {{p.name}}-{{p.age}} </li>
</ul>


<!-- 遍历对象 -->
<ul>
   <li v-for="(val,k) of car" :key="k">
        {{val}}-{{k}} </li>
</ul>

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


 <!-- 遍历指定次数 -->
 <ul>
     <li v-for="(number, index) of 5" :key="index">
       {{index}}-{{number}}
     </li>
</ul>

(2)  列表过滤（模糊搜索）

有两种方法实现：计算属性和监视

使用监视的方法实现

① 实现原理

• 使用v-model让输入框中元素绑定到data的keyWord中
• 使用watch监视keyWord，一旦keyWord改变了，立刻执行过滤关键字
• 一旦keyWord发生变化，过滤关键字会返回一个新的数组，将该数组赋值给data中的filterPersons中
• 使用v-for遍历filPersons，显示过滤之后的结构

② 实现步骤：

第一步：v-model绑定keyWord

 第二步：监视input里面输入的值，将数组中包含input里输入值的数据筛选出来放到新数组中

 第三步：在模板中遍历新数组去展示

 实现效果：

 2.使用计算属性

① 实现原理：

• 计算属性依赖的keyword发生变化的时候就会重新执行计算属性
• 这个时候就得到新的过滤之后的数组
• 模板中遍历新的数组，就会得到过滤之后的数据

② 实现步骤：

第一步：在computed中直接返回符合条件的数据

 第二步：在模板中遍历计算属性

 实现效果

(3) 列表排序

代码实现：

• 通过计算属性实现，如果sortType 发生变化了，computed就会重新计算属性
• 使用数组的sort方法，传入两个参数，因为数组里面的数据是对象类型，所以在进行计算时，需要使用age属性进行计算，p2 - p1就是降序， p1 - p2就是升序

 <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,index) of filPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.gender}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    // 计算属性
    const vm = new Vue({
            el:'#root',
            data: {
                keyWord:'',
                sortType: 0, // 0原顺序  1降序 2升序
                persons:[
                    {id:001, name:'马冬梅', age:30, gender:'女'},
                    {id:002, name:'周冬雨', age:31, gender:'女'},
                    {id:003, name:'周杰伦', age:18, gender:'男'},
                    {id:004, name:'温兆伦', age:19, gender:'男'}
                ]
            },
            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>