VUE基本语法——样式绑定及渲染
目录
绑定class
字符串写法
数组写法
对象写法
内联样式
Demo
条件渲染
v-if
语法
v-show
语法
总结
列表渲染
v-for
语法
使用范围
v-for中key值
用index去作为key他会出现什么问题呢？
实际应用汇总我们如何选择key呢？
绑定class
字符串写法
它适用于样式的类名不确定，需要动态指定
数组写法
它适用于要绑定的样式个数是不确定的，名字也是不确定的
对象写法
它适用于我们药泵丁的样式个数确定了，名字也确定了，但是要动态判断是否绑定的操作
内联样式
内联样式的使用方式和上面的三种方式同样适用
1、:style="{fontSize:xxx}"其中xxx是动态值。
2、:style=“[a,b]”，其中a和b是我们定一个的样式对象。
Demo
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script><title>Title</title><style>.basic{width: 100px;height: 50px;background: aqua;}.moodclass{background: red;border-radius:10px;}.a{border-radius:20px;}.b{border-radius:30px;}.c{border-radius:60px;background: bisque;}</style>
</head>
<body><div id="root"><div class="basic" :class="mood">{{name}}</div><br/><div class="basic" :class="classArr">{{name}}</div><br/><div class="basic" :class="classObj">{{name}}</div></div>
</body><script type="text/javascript">// Vue.config.productionTip = false;// 创建一个Vue实例new Vue({el:'#root', // el用于指定当前vue实例是为哪一个容器服务的，通常是css选择器字符串data:{ // 此处的data用于存储数据，数据是供我们el所指定的容器去使用的，我们这里暂且吧值写为一个对象。name:'我是一个div',mood:'moodclass',classArr:['a','b','c'],classObj:{a:true,b:true,c:true}},})
</script>
</html>
条件渲染
条件渲染vue为我们提供了了两种实现方案，分别是v-if和v-show
v-if
特点是不展示DOM元素，直接被移除的。它适用于切换频率比较低的场景
语法
1、v-if=“表达式”
2、v-else-if="表达式"
3、v-else=“表达式”
注意：上述三种方式可以组合使用，但是前提条件是结构紧凑，中间不能夹杂其他组件，否则不会正确执行
v-show
他是不展示DOM元素的，并且也不会被移除，他只是将我们的样式隐藏了而已。它适用于切换品鹿比较高的场景中
语法
v-show=“表达式”
总结
当我们使用v-if的时候，元素可能会出现无法获取到的情况；但是，我们使用v-show的时候，则一定可以获取到元素。
列表渲染
v-for
它用于展示我们的列表数据
语法
v-for=“（item，index） in xxx” :key="index"
使用范围
他可以遍历的有：对象、数组、指定参数（极少用）、字符串（极少用）
v-for中key值
虚拟DOM中的key有什么作用呢？
key其实是虚拟DOM对象的一个标识，当他的数据发生改变的时候，Vue会根据这个新的数据生成一套新的虚拟DOM，之后Vue会将新的虚拟DOM和旧的虚拟DOM进行比对，检查是否会有差异变化
比较的规则如下：
1、他先拿到新的虚拟DOM的key然后在去旧的虚拟DOM中找到一致的key
1）、如果虚拟DOM中的内容没有改变，那么他会直接将之前定的DOM展示到页面
2）、如果虚拟DOM中的内容已经发生改变，那么会重新生成一个真实的DOM，最后替换掉页面上之前的真实DOM信息用于展示
2、新的虚拟DOM的key值如果在旧的虚拟DOM中没有找到到，那么创建新的真是DOM，之后他会渲染到页面上进行展示。
用index去作为key他会出现什么问题呢？
1、如果我们对数据进行了一个逆向添加数据、逆序删除这种具有比较非常规的操作，那么会产生一些没有必要的真实DOM更新，虽然这样操作对于页面没有什么太大问题，但是效率时非常低的。
2、如果在他的结构中还包含了一些输入类的DOM，那么他会产生错误的Dom更新。则界面就出现了比较严重的问题。
实际应用汇总我们如何选择key呢？
1、这个在api中其实已经给定了标准，就是用我们唯一的标识，比如主键、身份证号等唯一的信息
2、假如没有对数据进行逆序操作的情况，只是用于对列表的渲染展示，使用index也是没有任何问题的。
好了，今天关于样式绑定及渲染的文章就到这里。
欢迎大家点击下方卡片，关注《coder练习生》