Vue学习笔记八：v-for，v-if，v-show指令
v-for指令：遍历
HTML和效果图
有几个需要讲的点，先看v-for的HTML，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜀云泉</title>
<script type="text/javascript" src="../lib/vue-2.6.10.js"></script>
</head>
<body>
<!-- 这个div就是MVVM中的V，View -->
<div id="app">
<!-- 直接遍历数字 -->
<p v-for="item in 3">这是第{{ item }}次循环</p>
<!-- 遍历list数组 -->
<p v-for="item in list" v-text="item"></p>
<!-- 遍历list对象 -->
<p v-for="item in list2">{{ item.id }}--{{ item.name }}</p>
<!-- 遍历list3对象 -->
<p v-for="(val,key,i) in list3">值是：{{ val }}--键是：{{ key }}--索引是：{{ i }}</p>
<hr>
<!-- 再使用v-for遍历对象添加对象的时候，一定要写key，这个可以防止数据错乱 -->
<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 list2" :key="item.id">
<input type="checkbox">{{ item.id }}--{{ item.name }}
</p>
</div>
<script>
// 这个vm就是MVVM中的VM，ViewModel
var vm=new Vue({
el: '#app',
// 这个data就是MVVM中的M，Model
data: {
id:'',
name:'',
list:[1,2,3],
list2:[
{id:1,name:"许嵩"},
{id:2,name:"蜀云泉"},
{id:3,name:"弹吉他"}
],
list3:{
id:1,
name:"蜀云泉",
gender:"男",
age:24
}
},
methods: {
add(){
this.list2.push({id:this.id,name:this.name})
}
}
})
</script>
</body>
</html>
效果图如下：
v-for讲解
其实看代码就已经清楚了，我不清楚的一点是，我想写多个插值表达式，就必须使用插值表达式，这样不就出现了才学Vue的时候出现的插值表达式闪烁的问题了？我使用v-text也仅仅只能使用一个插值表达式，这里暂时存疑。
重点的地方就是v-for在遍历的同时，如果向数组里面插入新的内容的时候，一定要写key值，如果不写的话，复选框并没有真正的绑定数据，仅仅绑定的是那个索引的数据而已，所以一定要写key
v-if和v-show：创建，删除，显示，隐藏
HTML和效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜀云泉</title>
<script type="text/javascript" src="../lib/vue-2.6.10.js"></script>
</head>
<body>
<!-- 这个div就是MVVM中的V，View -->
<div id="app">
<input type="button" value="点我" @click="flag=!flag">
<h3 v-if="flag">这是v-if控制的元素</h3>
<h3 v-show="flag">这是v-show控制的元素</h3>
</div>
<script>
// 这个vm就是MVVM中的VM，ViewModel
var vm=new Vue({
el: '#app',
// 这个data就是MVVM中的M，Model
data: {
flag:true
},
methods: {
}
})
</script>
</body>
</html>
效果图：点击按钮，下面的会消失，再点击会出现
v-if和v-show的原理
这个我们打开调试台就知道了，如图
发现没，总结一下
- v-if每次都会重新删除和创建元素
- v-show是切换了元素的display的显示状态而已
- v-if有较高的切换性能消耗，所以涉及到频繁的切换，不要使用v-if
- v-show有较高的初始渲染消耗
防盗链接：本博客由蜀云泉发表
Vue学习笔记八：v-for，v-if，v-show指令的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)
目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Learning ROS forRobotics Programming Second Edition学习笔记(八)indigo rviz gazebo
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
随机推荐
- ios黑科技
1.brew brew 是 Mac 下的一个包管理工具,类似于 centos 下的 yum,可以很方便地进行安装/卸载/更新各种软件包,例如:nodejs, mysql等,可以用来快速搭建各种本地环境 ...
- Dom文本应用-表格隔行间亮样式
效果: 隔行一个颜色,鼠标移上去,被选中的那一行就变颜色,其次,鼠标离开其区域,颜色又变回原来的颜色. 一.表格隔行间亮样式-HTML代码 首先我们要有个表格 <table id='tab1' ...
- http建立连接过程
参考:http://blog.csdn.net/wangjun5159/article/details/51510594
- SSO 单点登录
一.单系统登录机制 1.http无状态协议 web应用采用browser/server架构,http作为通信协议.http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后的请求产生关 ...
- 2018-2019-2 20175213实验三《敏捷开发与XP实践》实验报告
一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:吕正宏 学号:20175213 指导教师:娄嘉鹏 实验日期:2019年4月29日 实验时间:13:45 - 21:00 实验序号:实验 ...
- 前端 搜索样式 html
原文:https://blog.csdn.net/linlinxie/article/details/77484214?utm_source=blogkpcl4 测试1: <div class= ...
- JVM系列3：类加载机制
了解类加载机制也是深入了解Java的重要一环,它包括加载过程.类加载器.加载机制等内容. 以下是我总结的思维导图. 首先讲讲类加载的时机,以下是会触发类加载的时机: 1.new.get/put/inv ...
- MFC笔记2
1.Create()函数创建,该函数原型如下: BOOL Create( LPCTSTR lpszCaption, DWORD dwStyle, const RECT& rect, CWnd* ...
- Jenkins之定时任务
H的用法: H 10 * * * ,这里H不是小时的意思,符号H(代表“Hash”,后面用“散列”代替) 符号H 在一定范围内可被认为是一个随机值,但实际上它是任务名称的一个散列而不是随机函数,每个 ...
- Android Studio修改项目中整体包名
莫名的需求,要把之前的apk分成三个不同的apk,还要在应用市场能够上线,麻麻滴这样一听那还不要各个apk包的包名不同以及apk签名文件也不同嘛(签名文件一般也用不同,为防止上线冲突嘛).所以就亲自尝 ...