Vue学习笔记（三）
条件渲染
在Vue中，提供了条件渲染，这类似于JavaScript中的条件语句。
v-ifv-elsev-else-ifv-show
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
<script>
export default {
data() {
return {
flag: true
}
}
}
</script>
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看见我吗</div>
</template>
v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”
<script>
export default {
data() {
return {
flag: false
}
}
}
</script>
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看见我吗</div>
<div v-else>那你还是看看我吧！</div>
</template>
v-else-if
顾名思义，v-else-if提供的是相应于v-if的else if 区块。它可以连续多次重复使用
<script>
export default {
data() {
return {
flag: false,
type: "D",
}
}
}
</script>
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看见我吗</div>
<div v-else>那你还是看看我吧！</div>
<div v-if="type==='A'">A</div>
<div v-else-if="type==='B'">B</div>
<div v-else-if="type==='C'">C</div>
<div v-else>Not A/B/C</div>
</template>
v-show
另一个用于条件性展示元素的选项是 v-show 指令
<script>
export default {
data() {
return {
flag: true,
type: "D",
}
}
}
</script>
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看见我吗</div>
<div v-else>那你还是看看我吧！</div>
<div v-if="type==='A'">A</div>
<div v-else-if="type==='B'">B</div>
<div v-else-if="type==='C'">C</div>
<div v-else>Not A/B/C</div>
<div v-show="flag">你可以看看我吗？</div>
</template>
v-if vs v-show 的区别
v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<script>
export default {
data() {
return{
names: ["潘家辉","大佬","真强","!"]
}
}
}
</script>
<template>
<h3>列表渲染</h3>
<p v-for="item in names">{{ item }}</p>
</template>
复杂数据
大多数情况下，我们渲染的数据源来于网络请求，也就是JSON格式。
<script>
export default {
data() {
return{
names: ["潘家辉","大佬","真强","!"],
result: [{
"id": 2261677,
"name": "我不是药神",
"score": 9.7,
"release_date": "2018-07-05",
"cover_url": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2561305377.jpg"
}, {
"id": 26752088,
"name": "疯狂动物城",
"score": 9.2,
"release_date": "2016-03-04",
"cover_url": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2315672647.jpg"
}, {
"id": 1295644,
"name": "阿甘正传",
"score": 9.4,
"release_date": "1994-06-23",
"cover_url": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p510876377.jpg"
}],
}
}
}
</script>
<template>
<h3>列表渲染</h3>
<p v-for="item in names">{{ item }}</p>
<div v-for="item in result">
<p>{{ item.name }}</p>
<p>{{ item.score }}</p>
<p>{{ item.release_date }}</p>
<img :src="item.cover_url" alt="tu">
</div>
</template>
v-for也支持使用可选的第二个参数表示当前项的位置索引
<p v-for="(item,index) in names">{{ item }}-{{ index }}</p>
也可以使用of作为分隔符来替代in，这更接近JavaScript的迭代器语法
<p v-for="(item,index) of names">{{ item }}-{{ index }}</p>
v-for与对象
也可以使用v-for来遍历一个对象的所有属性。
userInfo: {
name: "潘家辉",
age: 18,
sex: "男"
}
<div>
<p v-for="(value,key,index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p>
</div>
运行截图
补充-通过key管理状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key attribute：
<script>
export default {
data(){
return{
names: ['Alice', 'Bob', 'Cathy']
}
}
}
</script>
<template>
<h3>Key属性添加到v-for中</h3>
<p v-for="(item,index) in names" :key="index">{{ item }}</p>
</template>
温馨提示
key在这里是通过一个v-bind绑定的特殊attribute。- 推荐在任何可行的时候为
v-for提供一个keyattribute。 key绑定的值期望是一个基础类型的值，例如字符串或number类型。
key的来源
不要使用index作为key的值，我们要确保每一条数据的唯一索引不会发生变化。
一般使用数据库的唯一id