Vue条件渲染与列表渲染【Vue】
Vue
1.1 class 与 style 绑定
绑定样式：
- class样式
写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
- style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>绑定样式</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.atguigu1{background-color: yellowgreen;}.atguigu2{font-size: 30px;text-shadow:2px 2px 10px red;}.atguigu3{border-radius: 20px;}</style><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/><!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 --><div class="basic" :class="classArr">{{name}}</div> <br/><br/><!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --><div class="basic" :class="classObj">{{name}}</div> <br/><br/><!-- 绑定style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div> <br/><br/><!-- 绑定style样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'尚硅谷',mood:'normal',classArr:['atguigu1','atguigu2','atguigu3'],classObj:{atguigu1:false,atguigu2:false,},styleObj:{fontSize: '40px',color:'red',},styleObj2:{backgroundColor:'orange'},styleArr:[{fontSize: '40px',color:'blue',},{backgroundColor:'gray'}]},methods: {changeMood(){const arr = ['happy','sad','normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})</script></html>
1.2 条件渲染
条件渲染：
- v-if 写法：
（1）v-if=“表达式”
（2）v-else-if=“表达式”
（3）v-else=“表达式”
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被 “打断”
- v-show写法：
v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
- 备注：使用 v-if 的时候，元素可能无法获取到，而使用v-show 一定可以获取到。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script></head>
<body><!-- 准备好一个容器 --><div id="root"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我 n + 1</button><!-- 使用 v-show 做条件渲染 --><!-- <h2 v-show="false">欢迎来到{{name}}</h2> --><!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> --><!-- 使用 v-if 做条件渲染 --><!-- <h2 v-if="false">欢迎来到{{name}}</h2> --><!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> --><!-- v-else 和 v-else-if --><!-- <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>哈哈</div> --><!-- v-if 与 template配合使用 --><template v-if="n === 1"><h2>你好</h2><h2>西安文理</h2><h2>西安</h2></template></div>
</body>
<script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#root',data: {name: '西安文理',n: 0}})
</script>
</html>
1.3 列表渲染
1.3.1 基本列表
v-for指令：
（1）用于展示列表数据
（2）语法： v-for="(item, index) in xxx" :key="yyy"
（3）可遍历：数组、对象、字符串(用的少)、指定次数(用的少)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 遍历数组 --><h2>人员列表</h2><ul><li v-for="(p, index) of persons" :key="p.id">{{p.name}} - {{p.age}}</li></ul><!-- 遍历对象 --><h2>汽车信息</h2><ul><li v-for="(value, key) of car" :key="key">{{key}} : {{value}}</li></ul><!-- 遍历字符串 --><h2>测试遍历字符串(用的少)</h2><ul><li v-for="(char, index) of str" :key="index">{{char}} : {{index}}</li></ul><!-- 遍历指定次数 --><h2>测试遍历指定次数（用的少）</h2><ul><li v-for="(number, index) of 5" :key="index">{{index}} : {{number}}</li></ul></div>
</body>
<script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',data: {persons: [{id: '001', name: '张三', age: 18},{id: '002', name: '李四', age: 19},{id: '003', name: '王五', age: 20},],car: {name: '奥迪A8',price: '70万',color: '黑色'},str: 'hello'}})
</script>
</html>
1.3.2 Key的原理
面试题：react、vue中的key有什么作用？（key的内部原理）
- 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：- 对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。- 用index作为key可能会引发的问题：
（1） 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
（2） 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。- 开发中如何选择key?:
（1）最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 遍历数组 --><h2>人员列表</h2><button @click.once="add">添加一个老刘</button><ul><li v-for="(p, index) of persons" :key="id">{{p.name}} - {{p.age}}<input type="text"></li></ul></div>
</body>
<script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',data: {persons: [{id: '001', name: '张三', age: 18},{id: '002', name: '李四', age: 19},{id: '003', name: '王五', age: 20},],},methods: {add(){const p = {id: '004', name: '老刘', age: 40}this.persons.unshift(p)}}})
</script>
</html>
1.3.3 列表过滤
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><ul><li v-for="(p, index) of filPersons" :key="p.index">{{p.name}} - {{p.age}} - {{p.sex}}</li></ul></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false//用 watch 实现//# region/*new Vue({el: '#root',data: {keyWord: '',persons: [{id: '001', name: '马冬梅', age: 18,sex: '女'},{id: '002', name: '周冬雨', age: 19,sex: '女'},{id: '003', name: '周杰伦', age: 20,sex: '男'},{id: '004', name: '温兆伦', age: 21,sex: '男'},],filPersons:[]},watch: {keyWord:{immediate: true,handler(val){this.filPersons = this.persons.filter((p) => {//函数体return p.name.indexOf(val) !== -1})}}}})*///#endregion//用computed实现new Vue({el: '#root',data: {keyWord: '',persons: [{id: '001', name: '马冬梅', age: 18,sex: '女'},{id: '002', name: '周冬雨', age: 19,sex: '女'},{id: '003', name: '周杰伦', age: 20,sex: '男'},{id: '004', name: '温兆伦', age: 21,sex: '男'},],},computed: {filPersons(){return this.persons.filter((p) => {return p.name.indexOf(this.keyWord) !== -1})}}})</script>
</html>
1.3.4 列表排序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><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.sex}}</li></ul></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false//用computed实现new Vue({el: '#root',data: {keyWord: '',sortType: 0, //0原顺序 1降序 2升序persons: [{id: '001', name: '马冬梅', age: 30,sex: '女'},{id: '002', name: '周冬雨', age: 19,sex: '女'},{id: '003', name: '周杰伦', age: 24,sex: '男'},{id: '004', name: '温兆伦', age: 21,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>
</html>
1.3.5 Vue监测数据改变的原理
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue监测数据改变的原理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'西安文理',address:'西安',student:{name:'tom',age:{rAge:40,sAge:29,},friends:[{name:'jerry',age:35}]}}})</script>
</html>
1.3.6 Vue.set的使用
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue监测数据改变的原理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h1>学校信息</h1><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><h2>校长是：{{leader}}</h2><hr/><h1>学生信息</h1><button @click="addSex">添加一个性别属性，默认值是男</button><h2>姓名：{{student.name}}</h2><h2 v-if="student.sex">性别：{{student.sex}}</h2><h2>年龄：真实{{student.age.rAge}}, 对外{{student.age.sAge}}</h2><h2>朋友们</h2><ul><li v-for="(f, index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'西安文理',address:'西安',student:{name:'tom',// sex: '男',age:{rAge:40,sAge:29,},friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {addSex(){// Vue.set(this.student, 'sex', '男')this.$set(this.student, 'sex', '男')}}})</script>
</html>
1.3.7 Vue监测数据改变的原理_数组
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue监测数据改变的原理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h1>学校信息</h1><h2>学校名称：{{school.name}}</h2><h2>学校地址：{{school.address}}</h2><h2>校长是：{{school.leader}}</h2><hr/><h1>学生信息</h1><button @click="addSex">添加一个性别属性，默认值是男</button><h2>姓名：{{student.name}}</h2><h2 v-if="student.sex">性别：{{student.sex}}</h2><h2>年龄：真实{{student.age.rAge}}, 对外{{student.age.sAge}}</h2><h2>朋友们</h2><ul><li v-for="(f, index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul><h2>爱好</h2><ul><li v-for="(h, index) in student.hobby" :key="index">{{h}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{school: {name:'西安文理',address:'西安',},student:{name:'tom',// sex: '男',age:{rAge:40,sAge:29,},hobby: {h1: '抽烟',h2: '喝酒',h3: '打游戏'},friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {addSex(){// Vue.set(this.student, 'sex', '男')this.$set(this.student, 'sex', '男')}}})</script>
</html>
1.3.8 总结 Vue 数据监测
Vue监测数据的原理：
- Vue 会监视data中
所有层次的数据。 - 如何监测对象中的数据？
通过 setter 实现监视，且要在new Vue时就要传入要监测的数据。
（1）对象中后追加的属性，Vue默认不做响应式处理
（2）如需给后添加的属性做响应式，请使用如下 API:
Vue.set(target, propertyName/index, value)vm.$set(target, propertyName/index, value)
- 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新
（2）重新解析模板，进而更新页面 - 在 Vue 修改数组中的某个元素一定要用如下方法：
（1）使用这些 API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()等
（2）Vue.set() 或 vm. $ set() - 替换数组
变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更的方法，例如filter()、contact()和slice()。他们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换就数组。
特别注意：Vue.set() 和 vm. $ set()不能给 vm 或 vm 的 根数据对象 添加属性！！！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style><script type="text/javascript" src="../js/vue.js"></script></head>
<body><!-- 准备好一个容器 --><div id="root"><h1>学生信息</h1><button @click="student.age++">年龄+1岁</button><br/><button @click="addSex">添加性别属性，默认值：男</button><br/><button @cilck="student.sex = '未知' ">修改性别</button><br/><button @click="addFriend">在列表首位添加一个朋友</button><br/><button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br/><button @click="addHobby">添加一个爱好</button><br/><button @click="updateHobby">修改第一个爱好为：开车</button><br/><button @click="removeSmoke">过滤掉爱好中的抽烟</button><h3>姓名：{{student.name}}</h3><h3>年龄：{{student.age}}</h3><h3 v-if="student.sex">性别：{{student.sex}}</h3><h3>爱好：</h3><ul><li v-for="(h, index) in student.hobby" :key="index">{{h}}</li></ul><h3>朋友们</h3><ul><li v-for="(f, index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el: '#root',data: {student:{name: 'tom',age: 18,hobby: ['抽烟', '喝酒', '打游戏'],friends: [{name: 'jerry', age: 35},{name: 'tony', age: 36}]}},methods: {addSex(){// Vue.set(this.student, 'sex', '男')this.$set(this.student, 'sex', '男')},addFriend(){this.student.friends.unshift({name: 'jack', age: 70})},updateFirstFriendName(){this.student.friends[0].name = '张三'// this.student.friends[0].age = '5'},addHobby(){this.student.hobby.push('学习')},updateHobby(){// this.student.hobby.splice(0, 1, '开车')// Vue.set(this.student.hobby, '0', '开车')this.$set(this.student.hobby, 0, '开车')},removeSmoke(){//filter不影响原数组的改变；Vue也没有包裹这个 filterthis.student.hobby = this.student.hobby.filter((h) => {return h !== '抽烟'})}}})
</script>
</html>