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>