前端入门学习笔记（三十五）vue.js入门（三）条件 v-if 与循环 v-for，v-for 中 in 和 of 的区别

1.v-if

v-if相当好理解，这里我就只贴实例代码了

<div id="app"><p v-if="true">现在你看到我了</p><p v-if="false">现在你看不到我了</p><p v-if="seen">现在看得到，因为seen为true</p>
</div><script>
var app = new Vue({el: '#app',data: {seen: true}
})
</script>

2.v-for

2.1 v-for的简单使用，v-for 中 in 和 of 的区别

  <body><div id="app"><div v-for="todo in todos">{{ todo.text }}</div></div><script>var app = new Vue({el: '#app',data: {todos: [{ text: '学习 JavaScript' },{ text: '学习 Vue' },{ text: '整个牛项目' }]}})</script></body>

此处可写为item in todos也无妨，只要内容写为{{item.text}}即可，这样就实现了遍历todos变量。
输出结果如下

2.2 v-for 中 in 和 of 的区别

如果你比较细心你会发现上面的代码中，v-for=“todo in todos”，似乎是在使用js中的for in语法，得到的应该是对象数组的下标才对，怎么直接得到了值呢？因为在 vue 的 v-for 中， in 和 of 并没有区别，你你把它写成v-for="todo of todos"也是一样的效果

2.3 高级一点点的v-for

不过如果大家如果有用vue的相关插件，会发现你输入vfor的时候，它弹出来的是这样的东西
其中的 :key是v-bind:key的缩写，这一点将在下一篇的笔记中提到，此时可以先放置不管v-bind

v-for="(item, index) in items" :key="index"

我们改写一下代码，改写为这样

      <div v-for="(item, index) in todos" :key="index">{{ index }} ------- {{ item.text }}</div>

输出的效果如下

其实v-for中还有更多的参数可以调用，接下来我们使用普通的对象的时候，作为举例

  <body><div id="app"><div v-for="(item, key, index) of userInfo">{{ item }} ----- {{ key }} ------ {{ index }}</div></div><script>let vm = new Vue({el: '#app',data: {userInfo: {name: 'dell',age: 20,gender: 'male',salary: 'secret'}}})</script></body>

输出如上图所示，为什么此处不用对象数组作为实例呢？因为对象数组中index和key是同一个值，大家可以自行测试一下。

前端入门学习笔记（三十五）vue.js入门（三）条件 v-if 与循环 v-for，v-for 中 in 和 of 的区别相关推荐

前端入门学习笔记六十五
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>CS ...
JavaScript学习笔记（十五）
JavaScript学习笔记(十五) 事件事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是 ...
OpenCV学习笔记（十五）：图像仿射变换：warpAffine(),getRotationMatrix2D()
OpenCV学习笔记(十五):图像仿射变换:warpAffine(),getRotationMatrix2D() 一个任意的仿射变换都能表示为乘以一个矩阵(线性变换)接着再加上一个向量(平移)的形式. ...
cortex_m3_stm32嵌入式学习笔记（十五）：待机唤醒实验（WK_UP外部中断）
cortex_m3_stm32嵌入式学习笔记(十五):待机唤醒实验(WK_UP外部中断) https://blog.csdn.net/qq_16255321/article/details/43086 ...
汇编入门学习笔记（十二）—— int指令、port
疯狂的暑假学习之汇编入门学习笔记 (十二)-- int指令.port 參考: <汇编语言> 王爽第13.14章一.int指令 1. int指令引发的中断 int n指令,相当于引 ...
MATLAB学习笔记（十五）
MATLAB学习笔记(十五) 一.非线性方程求解与函数极值计算 1.1 非线性方程数值求解 1.2 函数极值的计算 1.2.1 无约束最优化问题 1.2.2 有约束最优化问题一.非线性方程求解与函数 ...
学习笔记（十五）——镜像的知识点与注意事项
学习笔记(十五)--镜像的知识点与注意事项一.基础知识 1.SQL Server镜像只有两种模式:高安全模式和高性能模式.两种模式的主要区别在于在事务提交后的操作. 在高性能模式下,主体服务器不需要 ...
Cty的Linux学习笔记（十五——wget）
Linux学习笔记--第十五篇 wget命令用于在终端中下载网络文件,格式为"wget [参数] 下载地址" 参数: -b:后台下载模式 -P:下载到指定目录 -t:最大尝试次 ...
MyBatis多参数传递之混合方式——MyBatis学习笔记之十五
在本系列文章的<MyBatis多参数传递之Map方式示例>一文中,网友mashiguang提问如下的方法如何传递参数:public List findStudents(Map condit ...
学习笔记（十五）——MySQL（查询）
查询方法下面的查询都是对单表的查询,所以先创建表tb1(下面的tb1均代表此表) create table tb1(id int,name varchar(10),age int,class var ...