【备战春招】第三天+vue复习

学习课程：前端工程师2022版-vue基础入门

lesson8:样式绑定语法2-8 样式绑定语法-慕课网体系课 (imooc.com)

lesson9:条件渲染2-9 条件渲染-慕课网体系课 (imooc.com)

lesson10:列表循环渲染（1）2-11 列表循环渲染（1）-慕课网体系课 (imooc.com)

讲师：Dell老师

今天继续了昨天的课程安排，学习了vue的样式绑定语法、条件渲染和列表循环渲染。

样式绑定语法就是通过v-bind指令在元素上绑定其所拥有属性将其值变为data函数中返回的定义变量。变量的类型可以为字符串类型、对象、数组。使用了这条指令后就可以在data函数中自定义需要书写的属性，使标签的属性变得更加灵活。它不仅可以直接使用，还可以和普通class属性共存。

条件渲染就是通过v-if指令实现元素的展示与隐藏。首先会在data函数中定义一个布尔值变量，其次就是在模板中需要使用指令去实现展示隐藏功能的元素上添加v-if="变量名"的指令。那么当变量的值为真，则该元素展示，反之则不展示。v-else和v-else-if指令则会和离其最近的v-if指令进行匹配，一般情况下会定义多个布尔值变量。当v-if的变量值为false则该元素不显示，执行下一条。此时v-else-if的变量为true，则该元素显示。若都为假，最后会显示v-else指令所在元素。

v-if和v-show之间的区别在于v-if会在dom树中移除或添加该元素，v-show则只是将该元素的display属性值进行block和none之间的修改。每当发生dom操作，页面便会重新加载一次，及其耗费性能，所以能使用v-show的情况下就使用v-show去操作元素。

v-for指令则是会将data函数中定义的数组或者对象进行循环获取其每项的内容，并展示出来。一般形参会有两个item，index和value，key，item数组中的某一项的值，index则表示其所在位置；value表示对象中属性的值，key表示对应的属性。key值一般设置为唯一值，当增加内容后浏览器会判断key值是否存在，如果存在就不会再次渲染，提高页面性能。

继续加油！！！