123我们一起学循环啊
本文标识 : V00006
本文编辑 : Jack 风 编程工具 : Vscode 阅读时长 : 9分钟
本期快捷键
快速复制当前行到下一行 Shift + Alt + ↓
格式化代码 快捷键On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu Ctrl + Shift + I
v-for 案例演示及代码
·效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- <p>{{ list[0] }}</p>
<p>{{ list[1] }}</p> -->
<!-- 前边是循环的每一项，List为数组 -->
<!-- <p v-for=" item in list">{{item}}</p> -->
<!-- v-for 循环普通数组，然后展示索引值 -->
<!-- <p v-for="(item,i) in list">索引值：{{i}} --- 每一项 {{item}} </p> -->
<!-- v-for 循环json list -->
<!-- <p v-for=" user in list1"> Id: {{ user.id}} == 名字： {{user.name}} </p> -->
<!-- 加上索引 -->
<p v-for=" (user,i) in list1"> Id: {{ user.id}} == 名字： {{user.name}} 索引为:{{i}} </p>
</div>
<!-- shift + alt + ↓ 快速复制当前行到下一行 -->
<!-- 格式化代码 快捷键 -->
<!-- On windows shift+Alt+F -->
<!-- On Mac shift + Option +F -->
<!-- On Ubuntu ctrl + shift + I -->
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6, 7, 8],
list1: [
{ id: 1, name: '小1' },
{ id: 2, name: '小2' },
{ id: 3, name: '小3' },
{ id: 4, name: '小4' },
{ id: 5, name: '小5' },
{ id: 6, name: '小6' },
]
},
methods: {}
});
</script>
</body>
</html>
循环对象
V-for key值得绑定
这是一个正常的末尾插入
我们这里选定4 开始添加
（发现异常了吧 index 不断再变）
这里就说到了我们 key的重要性
看看正确的是如何的吧
（不论如何添加 index不会改变）
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- in 后边 ：普通数组，对象数组 对象 以及数字 -->
<!--v-for 迭代数字 从 1 开始 -->
<!-- <p v-for="count in 10 ">这是第 {{count}} 次循环</p> -->
<div>
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 加一个复选框 -->
<!-- <p v-for="item in list">
<input type="checkbox" name="" id="">
{{item.id}} ---- {{item.name}}
</p> -->
<!-- 加一个复选框 解决Key 变动的问题 每个对象 对应key-->
<!-- 注意事项 V-for 循环的时候，key 只能使用 number获取string -->
<!-- 注意：key在使用的时候 必须使用 v-bind 属性绑定的形式，指定key 的值 -->
<!-- 这里是正确的 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox" name="" id="">
{{item.id}} ---- {{item.name}}
</p>
<!-- key 保证 数据的唯一性。 -->
<!-- 那么在组件中，一旦使用v-for 循环的时候，
或者在一些特殊情况中，如果 v-for 有问题，
必须在使用 v-for 的同时呢，制定唯一的字符串/数字 类型 :key值 -->
<!-- 多写点也没问题 , 不写可能会出问题 -->
<!-- -->
<!-- <p v-for="item in list" key="item">
<input type="checkbox" name="" id="">
{{item.id}} ---- {{item.name}}
</p> -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '欢迎' },
{ id: 2, name: '关注' },
{ id: 3, name: '公号' },
{ id: 4, name: 'A2Data' },
]
},
methods: {
add() { // 添加方法
// push 末尾添加
// this.list.push({
// id: this.id,
// name: this.name
// })
// unshift 开头添加
this.list.unshift({
id: this.id,
name:this.name
})
}
}
});
</script>
</body>
</html>
v-if & v-show 效果
我们可以直观的看出 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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="button" value="点击" @click="go"> -->
<input type="button" value="点击" @click="flag=!flag">
<!-- v-if 的特点：每次都会重新删除或创建元素 -->
<!-- v-show 的特点： 每次不会重新进行DOM 的删除和创建操作，只是切换了元素的 display : none 样式 -->
<h3 v-if="flag">这是用 v-if 控制的元素</h3>
<h3 v-show="flag">这是用 v-show 控制的元素</h3>
<!-- 区别 -->
<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->
<!-- 假设元素涉及到频繁的切换，最好不用使用 v-if ，而是推荐使用 v-show-->
<!-- 假设元素可能永远也不会被显示出来让用户看到，则推荐使用 v-if -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
// go(){
// this.flag = !this.flag
// }
}
});
</script>
</body>
</html>
期待一起成长
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-09-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录