Vuejs之路之--循环渲染
来源:互联网 发布:最好用的p2p软件 编辑:程序博客网 时间:2024/05/24 05:19
一看见循环,我们就自然就想到了for循环,所以这里讲的就是v-for的故事,废话少说--
总结之:
1.其实v-for的语法格式为v-for = item in(of)items,在这里items可以是数组,对象等等,item是子自己定义的 ,表示items中的元素或者子项;
2.源数据是数组的话,还可以 v-for = (item,[index]) in(of) items 在这里index表示元素的下标,index是可选的;
3.源数据是对象的话,还可以 v-for = (item,[key],[index]) in (of) items 在这里key代表的是属性的键,item表示的对应的值,key和index都是可选的
4.如果源数据是数字,那么利用v-for的时候其中item就代表小于从零开始小于这个数字的数字,
5.可以用在template元素上;
6.当它们处于同一节点, v-for 的优先级比 v-if 更高,也就是说在v-for中的每一项都会执行v-if,你想为仅有的 一些 项渲染节点时,这种优先级的机制会十分有用,
比如这样:
<ul><li v-for = "item in dataif" v-if = "item.jud">{{item.fir}}</li></ul>
JS部分
dataif:{is:{fir:"我会出现",jud:true},isw:{fir:"我会出现的啦",jud:true},isf:{fir:"我将不会出现的啦",jud:false}}
可见在这里只会出现的item.jud为真的时候的对应的值......
key
为了让vuejs能够跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一 key 属性,工作方式类似于一个属性(说实话就是一个识别码)
数组的更新和检测
在这个模块中,包含一些晓得模块--
1.变异方法--主要介绍了数组的一些js中的常用的方法,之所以说是变异,是因为这些放方法操作原数组.当然也有些非变异方法, 这里就不做详述了。
2.重塑数组--为啥叫重塑,在这里就是通过非变异方法操作数组生成的新数组赋值给源数组即可,也叫重塑。
3.显示过滤/排序后的效果--根据计算属性,过滤器,和methods中定义的方法即可;
附:
在这里竟然碰到了数组中的另一个方法:数组.filter(),可以传参数,具体用法可以见下图:
更多关于该方法的信息,可以在这里做一些更深入的研究--->>filter的用法
- Vuejs之路之--循环渲染
- vuejs之路之--条件渲染
- Vuejs之路之--模板语法()
- vuejs之路之--事件绑定
- vuejs项目运行的探索之路
- vuejs项目运行的探索之路
- vuejs项目运行的探索之路
- webkit之渲染主循环理解
- Vuejs之路之--对实例生命周期的理解
- Vuejs之路之--过滤器的那些事
- Vuejs之路之--style和class的绑定
- vuejs之路之--v-model表单绑定
- Vuejs之路之--父子组件(未完待续)
- Vuejs之路之--子父之间的通信
- vuejs进阶之路一基础知识 2017-12-16
- 八小时实现迷你版vuejs之二:vuejs 架构
- vuejs之v-for的理解
- VueJs探索之watch用法详解
- 记一个idea下MAVEN项目的坑
- 安装Ubuntu双系统问题记录
- bzoj1212 [HNOI2004]L语言(Trie+暴力)
- maven:sql-maven-plugin插件执行sql脚本
- 一个乒乓球引发的一系列问题(穷举法)
- Vuejs之路之--循环渲染
- Vue之过度(动画)
- 【C语言】【unix c】GDB调试工具的使用
- [CEOI2011] balloons 单调栈
- 嵌套评论的数据库表设计
- php和数据库mysql的一些简单交互
- python简单脚本1
- Centos目录及其常用处理命令
- 欢迎使用CSDN-markdown编辑器