【Vue】Vue扫盲（一）事件标签、事件修饰符：@click.prevent @click.stop @click.stop.prevent、按键修饰符、及常用指令
文章目录
- 一、v-for
- 遍历数组
- 数组角标
- 遍历对象
- ：Key作用介绍
- 二、v-if、v-show
- 基本用法：
- 案例：
- 三、v-else、v-else-if 使用
继上一篇，继续来扫盲
一、v-for
遍历数据渲染页面是非常常用的需求， Vue 中通过 v-for 指令来实现。
遍历数组
语法： v-for=“item in items”
items： 要遍历的数组， 需要在 vue 的 data 中定义好。
item： 迭代得到的当前正在遍历的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for ="(user,index) in users" :key="user.name">
<!-- 显示user信息 v-for user in users -->
当前索引{{index}} ==> {{user.name}} ==>{{user.gender}}==>{{user.age}} <br/>
<!-- 获取数组下标 v-for (user,index) in users-->
<!-- 遍历对象
v-for value in object 遍历对象中的属性的值
v-for (value,key) in object 遍历对象中的属性的名和值
v-for (value,key,index) in object 遍历对象中属性名属性值和索引
-->
对象详情：
<span v-for="(value,key,index) in user">{{key}}=={{value }}=={{index}} </span>
<!-- 遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
</li>
</ul>
<ul>
<li v-for="(num,index) in nums" ::key="index" >
{}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
users:[{ name: '柳岩', gender: '女', age: 21 },
{ name: '张三', gender: '男', age: 18 },
{ name: '范冰冰', gender: '女', age: 24 },
{ name: '刘亦菲', gender: '女', age: 18 },
{ name: '古力娜扎', gender: '女', age: 25 }],
nums:[1,2,3,4,5,5]
},
methods: {
},
})
</script>
</body>
</html>
效果
数组角标
在遍历的过程中， 如果我们需要知道数组角标， 可以指定第二个参数：
语法： v-for=“(item,index) in items”
items： 要迭代的数组
item： 迭代得到的数组元素别名
index： 迭代到的当前元素索引， 从 0 开始。
<div id="app">
<ul>
<li v-for="(user, index) in users">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
</div>
效果：
遍历对象
v-for 除了可以迭代数组， 也可以迭代对象。 语法基本类似
语法：
v-for=“value in object”
v-for=“(value,key) in object”
v-for=“(value,key,index) in object”
1 个参数时， 得到的是对象的属性值
2 个参数时， 第一个是属性值， 第二个是属性名
3 个参数时， 第三个是索引， 从 0 开始
示例：
<div id="app">
<ul>
<li v-for="(value, key, index) in user">
{{index + 1}}. {{key}} - {{value}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
user: { name: '张三', gender: '男', age: 18 }
}
})
</script>
效果：
：Key作用介绍
用来标识每一个元素的唯一特征， 这样 Vue 可以使用“就地复用” 策略有效的提高渲染的
效率。
示例：
<ul>
<li v-for="(item,index) in items" :key=”index”></li>
</ul>
<ul>
<li v-for="item in items" :key=”item.id”></li>
</ul>
最佳实践：
如果 items 是数组， 可以使用 index 作为每个元素的唯一标识
如果 items 是对象数组， 可以使用 item.id 作为每个元素的唯一标识
特别注意：当 v-if 和 v-for 出现在一起时， v-for 优先级更高。 也就是说， 会先遍历， 再判断条件。
修改 v-for 中的案例， 添加 v-if：
<ul>
<li v-for="(user, index) in users" v-if="user.gender == '女'">{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
二、v-if、v-show
基本用法：
v-if， 顾名思义， 条件判断。 当得到结果为 true 时， 所在的元素才会被渲染。
v-show， 当得到结果为 true 时， 所在的元素才会被显示。
语法： v-if=“布尔表达式”, v-show=“布尔表达式”,
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="show=!show">点我呀</button>
<br/>
<span v-if="show">v-if看到我了</span>
<br/>
<span v-show="show">v-show看到我了</span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
show:true
},
methods: {
},
})
</script>
</body>
</html>
结果1：
结果2
三、v-else、v-else-if 使用
注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面， 否则它将不会被识别。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="app">
<button @click="random=Math.random()">点我呀</button>
<span>{{random}}</span>
<h1 v-if="random>=0.75">
看到我了，>=0.75
</h1>
<h1 v-else-if="random>=0.5">
看到我了，>=0.5
</h1>
<h1 v-else-if="random>=0.2">
看到我了，>=0.2
</h1>
<h1 v-else="random<0.2">
看到我了，<=0.2
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
random:1
},
methods: {
},
})
</script>
</body>
</html>
结果1：
结果2：
结果3：
