v-for渲染和样式绑定
1. 列表渲染
v-for指令：用于列表渲染和遍历数据
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做可以使 Vue 变得非常快。但是有些时候，我们却不希望vue复用，这时候Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 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 src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in animal" :key="item">{{item}}---{{index}}</li>
</ul>
<ul>
<li v-for="(key,value,index) in obj" :key="index">{{key}}---{{value}}--{{index}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
animal:['老虎','猴子','狮子'],
obj:{
name:'terry',
age:12
}
},
methods:{}
})
</script>
</body>
</html>
为什么在使用v-for时，官方推荐我们给对应的元素和组件加一个:key属性？
这个其实和Vue的虚拟DOM的Diff算法有关系。
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
我们希望可以在B和C之间加一个F，Diff算 法默认执行起来是这样的。
即把C更新成F，D更新成C，E更新成D，最 后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。
所以一句话，key的作用主要是为了高效的更新虚拟DOM。
2. style绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
写法： :style=“{fontsize:xxx}” 其中xxx是动态值
:style="[a,b]"其中a、b是样式对象
<!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 src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<style>
.red{
color: burlywood;
}
.color{
font-size: 18px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="app">
<!-- 动态绑定样式 -->
<div :style="{color:currentColor}">第一个div</div>
<div :style="styleObj1">我是第二个div</div>
<div :style="[styleObj1,styleObj2]">我是第三个div</div>
</div>
<script>
new Vue({
el:"#app",
data:{
currentColor:"red",
styleObj1:{
fontSize:'18px',
background:"blue"
},
styleObj2:{
backgroundColor:'red'
}
},
methods:{}
})
</script>
</body>
</html>
3. 动态绑定类名
写法： :class=‘xxx’ xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
<!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 src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<style>
.red{
color: burlywood;
}
.color{
font-size: 18px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="app">
<!-- 动态绑定类名 -->
<div :class="{red:true}">我是第四个div</div>
<div :class="{red:false,color:true}">我是第五个div</div>
<div :class="[{red:true},{color:true}]>我是第六个div</div>
</div>
<script>
new Vue({
el:"#app",
data:{
currentColor:"red",
styleObj1:{
fontSize:'18px',
background:"blue"
},
styleObj2:{
backgroundColor:'red'
}
},
methods:{}
})
</script>
</body>
</html>