一、绑定样式
1. class绑定样式名
标签中使用 :class="xxx" xxx可以是字符串，对象，数组
字符串：适用于类名不确定，动态获取
数组：适用于绑定多个样式，个数不确定，字数不确定
对象：适用于绑定多个样式，个数确定，名字确定，但不确定用不用
通过data中设置的名字进行class-字符串绑定：使用样式类名不确定动态决定
可以对当前数据进行点击随机变化：可以根据随机数生成数组的值
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> //以下是vue中的data和methods data: { name: "xlf", mood: "normal", }, changeMood() { const arr = ["happy", "sad", "normal"]; // 随机数包含0但是不包含1 const index = Math.floor(Math.random() * 3); this.mood = arr[index]; },
通过data中设置的名字进行class-数组绑定：动态样式交给vue（绑定的样式个数和名字不确定）
<div class="basic" :class="classArr">{{name}}</div> data: { classArr: ["xlf1", "xlf2", "xlf3"], },
通过data中设置的名字进行class-对象绑定：个数和名字确定（动态绑定用不用）
<div class="basic" :class="classObj">{{name}}</div> data: { name: "xlf", mood: "normal", classArr: ["xlf1", "xlf2", "xlf3"], classObj: { //此处的布尔值可以通过开发工具测试 xlf1: false, xlf2: false, }, },
2. style （样式绑定：对象）：使用较少
:style="{fontSize:xxx}" 其中xx就是动态值
:style="[a,b]" 其中a,b就是样式对象
注意：对象里面的名使用直接拼接成小驼峰命名法
style里面的数组还是包含对象写法
<div class="basic" :style="styleObj ">{{name}}</div> data: { styleObj: { fontSize: "40px", }, },
<div class="basic" :style="styleArr ">{{name}}</div> data: { name: "xlf", styleArr: [{ fontSize: "40px" }, { backgroundColor: "pink" }], },
二、条件渲染 ：符合某些条件才会渲染
1. v-show（切换频率高）
目的：显示隐藏切换
使用布尔值或者表达式进行条件渲染:（隐藏）结构还在
但是实现隐藏：使用样式的display：none
<h2 v-show="true">{{name}}</h2> <h2 v-show="1===3">{{name}}</h2> <h2 v-show="a">{{name}}</h2> //vue data: { name: "xlf", a: false, },
2. v-if（切换频率低）
类似于v-show：
<h2>当前的n是{{n}}</h2> <button @click="n++">点我n+1</button> <div v-if="n===1">regular</div> <div v-if="n===2">react</div> <div v-if="n===2">vue</div> //vue data: { n: 0, },
3. v-else-if（多个判断满足先出现的，所以多个判断值应该不同）
和js语句中分支的逻辑相同：效率较高
注意：不允许打断条件渲染语句
<div v-if="n===1">angular</div> <div v-else-if="n===2">react</div> <!--<div>@</div>打断之后后面的条件语句不执行--> <div v-else-if="n===3">vue</div> <div v-else>jquery</div>
4. 优化结构条件渲染
问题结构渲染：每一个结构都要单独的出现渲染值
<h2 v-show="n===1">你好</h2> <h2 v-show="n===1">中国</h2> <h2 v-show="n===1">西安</h2>
使用template模板包裹，没有结果影响，但是template只能配合使用v-if
<template v-if="n===1"> <h2>你好</h2> <h2>中国</h2> <h2>西安</h2> </template>
三、列表渲染
1. v-for遍历数组
可以使用:v-for展示列表数据
语法v-for="(item,index) in xxx",key="yyy"（key值可以是对象的id也可数组下标）
可便利：数组、对象、字符串、指定次数
数据存储为数组包含对象，通过遍历数组（多个对象），获取到当前遍历数据
每个对象的id值作为遍历的key值（单独标识）
<li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li> //vue data: { persons: [ { id: "001", name: "张三", age: 18 }, { id: "002", name: "李四", age: 20 }, { id: "003", name: "王五", age: 30 }, ] }
通过数组的属性：下标作为单独对象标识 in也可以改为of
使用数组下标作为key值，根据遍历先后进行排序
<li v-for="(p,index) of persons" :key="index"> {{p.name}}-{{p.age}}-{{index}} </li> data: { persons: [ { id: "001", name: "张三", age: 18 }, { id: "002", name: "李四", age: 20 }, { id: "003", name: "王五", age: 30 }, ] }
2. v-for遍历对象
<h2>汽车信息</h2> <ul> <!-- 数组参数：先是数据值，再是数据名 --> <li v-for="(value,k) of car">{{k}}-{{value}}</li> </ul> //vue car: { name: "奥迪", price: "70万", color: "黑色", },
3. v-for遍历字符串和数值
<li v-for="(string,index) of str">{{string}}-{{index}}</li> //vue data：{ str: "hello",}<li v-for="(number,index) of 5">{{number}}-{{index}}</li>
4. key值的作用与原理
key是虚拟DOM对象的标识，当数据发生变化，vue会根据【新数据】生成【新的虚拟DOM】
<div id="root"> <h2>人员列表</h2> <button @click.once="add">添加一个老刘</button> <ul> <li v-for="(p,index) of persons" :key="index"> {{p.name}}-{{p.age}}-{{index}} <input type="text" /> </li> </ul> </div> </body> <script> Vue.config.production = false; const vm = new Vue({ el: "#root", data: { persons: [ { id: "001", name: "张三", age: 18 }, { id: "002", name: "李四", age: 20 }, { id: "003", name: "王五", age: 30 }, ], }, methods: { add() { const p = { id: "004", name: "老刘", age: 40 }; this.persons.unshift(p); }, }, }); </script>
使用index的虚拟DOM算法
数据生成虚拟DOM，必须存在key值
虚拟DOM转为真实DOM（用户的操作是在真实DOM中响应）
根据数据生成新的虚拟DOM：计算初始虚拟DOM和新生的虚拟DOM
虚拟DOM不同的会替换然后从虚拟DOM中生成真实的DOM，但是相同key值最后复用之前虚拟DOM生成的真实DOM，然后就会出现真实DOM中张三放在老刘上
- 对比key值相同，继续对比，发现内容不同就不可复用，继续对比input发现相同继续复用
使用id值进行DOM对比算法（专有id）
当新虚拟dom中存在与原始虚拟dom某些相同数据相同的数据
加上原始真实dom中操作了某些数据
然后以上两点就会复用之前生成的真实dom
5. 列表筛选
实现：通过查找指定字符然后下方列表显示出来
实现页面数据获取：v-model
首先将输入框中的值和data中的值进行双向绑定
并在数据中创建一个新的数组
当数据值发生变化就需要过滤： watch
监视数据变化立即执行：当数据进行浅拷贝（返回对象包含val）给新数组
判断输入值是否在数据中
<div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入搜索" v-model="keyworld" /> <ul> <li v-for="(p,index) of filPerson" :key="index"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div>data: { keyworld: "", persons: [ { id: "001", name: "马冬梅", age: 18, sex: "女" }, { id: "002", name: "周冬雨", age: 20, sex: "女" }, { id: "003", name: "周杰伦", age: 30, sex: "男" }, { id: "003", name: "温兆伦", age: 25, sex: "男" }, ], filPerson: [], }, watch: { // 完整写法（必须使用：因为没有立即执行就会越筛选越少） keyworld: { immediate: true, handler(val) { // 过滤生成新数组需要接收 this.filPerson = this.persons.filter((p) => { return p.name.indexOf(val) !== -1;//包含val }); }, }, }
通过计算属性实现筛选
const vm = new Vue({ el: "#root", data: { keyworld: "", persons: [ { id: "001", name: "马冬梅", age: 18, sex: "女" }, { id: "002", name: "周冬雨", age: 20, sex: "女" }, { id: "003", name: "周杰伦", age: 30, sex: "男" }, { id: "003", name: "温兆伦", age: 25, sex: "男" }, ], }, computed: { // 计算属性通过返回值决定东西 filPerson() { return this.persons.filter((p) => { // 筛选条件：对象名字中存在当前vm实例中输入的值 return p.name.indexOf(this.keyworld) !== -1; }); }, }, });
6. 列表顺序 （计算属性）
将列表内容根据年龄进行排序（注意这里使用id作为key值）
根据第三方值作为切换值，当点击哪一个之后就开始执行哪一个排序
排序利用数组方法sort（a,b）降序就是后面减去前面：b-a
<div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入搜索" v-model="keyworld" /> <!-- 给每个按钮声名点击事件属性 --> <button @click="sortType = 2">年龄升序</button> <button @click="sortType = 1">年龄降序</button> <button @click="sortType = 0">原顺序</button> <ul> <!-- 注意：此处配合输入监视：如果使用key：index会降低效率 --> <li v-for="(p,index) of filPerson" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} <input type="text" /> </li> </ul> </div> </body> <script> Vue.config.production = false; // 利用计算属性进行筛选 const vm = new Vue({ el: "#root", data: { keyworld: "", persons: [ { id: "001", name: "马冬梅", age: 28, sex: "女" }, { id: "002", name: "周冬雨", age: 20, sex: "女" }, { id: "003", name: "周杰伦", age: 30, sex: "男" }, { id: "004", name: "温兆伦", age: 25, sex: "男" }, ], // 0代表原顺序 // 1代表降序 // 2代表升序 sortType: 0, }, computed: { // 计算属性实现模糊查找： // 计算属性通过返回值决定想要的东西 filPerson() { // 首先是筛选功能 const arr = this.persons.filter((p) => { return p.name.indexOf(this.keyworld) !== -1; }); // 判断是否需要排序：如果当前vm中存在sortType属性：开始排序（根据三元表达式） //排序需要按照降序就是两个参数之间相见后减去前，增序就是两个参数相减前减去后 if (this.sortType) { arr.sort((p1, p2) => { return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age; }); } return arr; }, }, }); </script> </html>
7 更新列表数据（引出数据监测）
当点击按钮就会更新第一条数据
问题：当直接修改第一组数据的对象属性是可以奏效的
但是如果直接修改数据中数组的第一个对象就不会奏效
但是这时候数据易筋经修改在vm中
//直接修改对象属性 methods: { updateMei() { this.persons[0].name = "马老师";//可以奏效 this.persons[0].age = 50;//可以奏效 this.persons[0].sex = "男";//可以奏效 }, },//修改数组第一个对象 methods: { updateMei() { this.persons[0] = { id: "001", name: "马老师", age: 50, sex: "男" }; //点击之后没有改数据 // 最后运用数组的七个api就可以实现 }, },
