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) 列表排序文章来源：https://www.toymoban.com/news/detail-617622.html
代码实现：文章来源地址https://www.toymoban.com/news/detail-617622.html
- 通过计算属性实现，如果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>到了这里，关于Vue2 第五节 class与style绑定，条件渲染和列表渲染的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![FE_Vue学习笔记 条件渲染[v-show v-if] & 列表渲染[v-for] 列表过滤 列表排序](https://imgs.yssmx.com/Uploads/2024/02/446581-1.png)
