Vuejs——(4)v-if、v-for
版权声明:出处http://blog.csdn.net/qq20004604
(二十)v-if
①标准v-if用法
简单来说,该值为true则显示该标签,为false则不显示;
如例:
- <div id="app">
- <div v-if="abc">{{abc.a}}</div>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- abc: {
- a: "1"
- }
- }
- })<pre name="code" class="javascript">
</script>
当abc这个对象存在时,显示这一行数据,其内容为abc.a的值;
假如abc这个对象不存在,那么则不显示;
也可以用另外一个变量来控制其是否显示(能否显示决定于该值隐式转换为boolean类型时是true还是false);
例如假如上面有abc这个对象,但这个对象是空对象(没有属性a),但空对象隐式转换后为true,因此会有div,但这个div里没有内容;
②template v-if 包装以同时影响多个html标签;
即假如多个标签(且他们是连续的),被一个变量控制是否显示,那么每个都这么写显然太繁琐,因此用一个template标签将这些标签包裹起来,用v-if标签控制该template标签是否显示,实际渲染时,template标签不会显示,只会显示其内的标签;
如示例:
- <div id="app">
- <template v-if="abc">
- <div>{{abc[0]}}</div>
- <div>{{abc[1]}}</div>
- <div>{{abc[2]}}</div>
- </template>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- abc: [1, 2, 3]
- }
- })
- </script>
由于非空数组是值为true,空数组的值为false,因此方便控制;
另外,这里只是演示,事实上更好的写法的v-for来控制内部三个标签来同时显示(当然,如果不需要显示全部的则不应该这么写);
显示内容:
<divid="app">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
③v-show 用于控制该标签的display样式
他的特点是,dom存在于页面内,已经渲染、事件绑定完毕,区别只是是否显示。
例如:
- <div v-show="a">{{test}}</div>
a的值为true,则正常显示;
a的值为false,则自动添加display:none
v-show不支持template写法(即不能同时控制多个同级连续div);
④v-else v-if和v-show的补充语句;
即v-if和v-show的判断为true时,不显示v-else标签的内容;否则显示v-else标签的内容。
例如:
- <div id="app">
- <div v-show="a">{{test}}</div>
- <div v-else>def</div>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- a: true,
- test: "abc"
- }
- })
- </script>
显示abc;
若把data中的a改为false,则显示def;
另外,标签之间需要连续,如以下,v-else则不能正常生效:
- <div v-show="a">{{test}}</div>
- <div>another</div>
- <div v-else>def</div>
另外,不要在组件的情况下使用v-else,而是采用v-show=”!变量名”来变相起到v-else的效果
⑤v-if和v-show的比较
v-if |
v-show |
|
渲染时间 |
第一次为真时 |
刚开始就渲染 |
切换形式 |
动态生成,局部编译/卸载 |
控制display属性 |
生成消耗 |
较小(只生成为真的部分) |
较大(生成全部) |
切换消耗 |
较大(切换时需要局部编译) |
较小(因为生成时已经渲染完成) |
v-if是在第一次条件为真时,进行渲染(比如他下面还有其他组件);
v-show因为只是控制display的属性,因此开始就会渲染;
(二十一)v-for列表渲染
①标准写法
- <li v-for="i in items">{{i}}</li>
【1】items是一个对象或者数组;
【2】该格式相当于for(var i in items){//略}
【3】插值的i相当于items[i]
【4】该li会被复制多个,然后依次被items[i]渲染,直到渲染完毕;
示例:
- <div id="app">
- <ul>
- <li v-for="i in items">{{i}}</li>
- </ul>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- items: {
- a: "1",
- b: "2",
- c: "3"
- }
- }
- })
- </script>
结果:
<divid="app">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
②索引编号:
在标签里使用$index,即表示当前索引在v-for中的编号(从0开始);
例如上面改为:
- <li v-for="i in items">{{i}}'s index is {{$index}}</li>
显示的是从0~2
③template v-for 用于包裹多个标签的v-for
简单来说,需要将多个标签都用v-for遍历,那么就需要用template标签。
同样,template在实际渲染的时候不会出现,只是起到一个包裹作用。
如代码:
- <div id="app">
- <ul>
- <template v-for="i in items">
- <li>Index is {{$index}}</li>
- <li>Content is {{i}}</li>
- </template>
- </ul>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- items: {
- a: "1",
- b: "2",
- c: "3"
- }
- }
- })
- </script>
显示结果是:
<ul>
<li>Index is0</li><li>Content is 1</li>
<li>Index is1</li><li>Content is 2</li>
<li>Index is2</li><li>Content is 3</li>
</ul>
④监视数组变动(修改数组)
当data的某个属性是一个数组时,用v-for可以遍历,但显然数组是可能变动的,因此对以下变动也进行数据绑定;
push() 数组末尾添加
pop() 数组末尾取出
shift() 数组开头取出
unshift() 数组开头添加
splice() 删除并插入
sort() 排序
reverse() 数组顺序颠倒
当利用以上方法变更数组时,被渲染的内容会实时更新;
⑤监视数组的改变(用另一个数组进行替换)
但数组从一个数组变为另一个数组时(记得,数组是按引用传递的),数据绑定依然生效;
但前提是使用以下方法:
filter() 过滤,参数是一个函数,取其返回值为true的元素被添加到新数组
concat() 合并两个数组,返回的数组是合并后的
slice() 返回数组的拷贝,从开始索引到结束索引(前含后不含)
⑥track-by(以下推测不完全确定,因为我没数据去测试)
按照说明,假如用一个新的对象数组来替换已有的对象数组(并且两个对象数组其对象的属性不同),那么由于v-for默认是通过数据对象的特征来决定已有作用域和DOM元素的复用程度,可能导致重新渲染整个列表(比如列表很大的话可能会导致效率很低)。
按照我的理解,大概就是从这样一个数组:(我推测是这样的)
- items: [
- {name: "a", age: 10},
- {name: "b", age: 11},
- {name: "c", age: 12}
- ]
变成这样
- items = [
- {name: "A", height: 150},
- {name: "B", height: 160},
- {name: "C", height: 170}
- ]
会导致列表重新渲染,如果列表内容特别多,那么就可能带来影响效率和性能。
解决这种方法的办法,就是使用track-by,即加入一个包含某特定属性的标识符,当这个属性的标识符其值相等时,则尽可能复用这个已有对象的作用域和DOM元素。
例如标签写法如下:
- <li v-for="item in items" track-by="id">{{item.name}}</li>
数据从:
- items: [
- {id: 1, name: "a", age: 10},
- {id: 2, name: "b", age: 11},
- {id: 3, name: "c", age: 12}
- ]
变为:
- items = [
- {id: 3, name: "A", height: 150},
- {id: 2, name: "B", height: 160},
- {id: 1, name: "C", height: 170}
- ]
那么在替换时,会复用。
注意,复用并不是使用之前同id的对象所在的dom位置,例如并不会将name=C的元素放在原有的name=a的元素的位置(即使他们id都为1),而是依然根据数组下标的顺序来显示数据。
⑦track-by=”$index”(不确定+1)
当数组没有某一个共同属性时(比如上面的id),但依然需要复用的话,那么就用这个。
他会强制v-for进入原位更新模式,片断不会被移动(我推测这个片断指v-for的dom标签),简单的根据对应的索引的值来刷新dom,这种模式可以处理数组中重复的值。(应该是指对于重复的值,比如像上面那种id为同一个数值的,也可以正常复用)。
由于替换方式简单暴力(索引肯定是一样的),所以高效。
————————————————————————
这让数据替换非常高效,但是也会付出一定的代价。因为这时DOM 节点不再映射数组元素顺序的改变,不能同步临时状态(比如 <input>
元素的值)以及组件的私有状态。因此,如果 v-for
块包含 <input>
元素或子组件,要小心使用 track-by="$index"
——————我表示以上这段话没看懂——————
如以下代码,reverse()依然在起作用啊
- <div id="app">
- <ul>
- <li v-for="item in items" track-by="$index">{{item.name}}</li>
- </ul>
- <button onclick="chagne()">change</button>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- items: [
- {id: 1, name: "a", age: 10},
- {id: 2, name: "b", age: 11},
- {id: 3, name: "c", age: 12}
- ]
- }
- })
- function chagne() {
- vm.items = [
- {id: 3, name: "A", height: 150},
- {id: 2, name: "B", height: 160},
- {id: 1, name: "C", height: 170}
- ];
- vm.items.reverse();
- }
- </script>
⑧数组的一些方法:
$set(索引, 被替换的值)
简单来说,以下代码是不会触发数据绑定的:
- vm.items[0] = {name: "test"};
替代方法是:
- vm.items.$set(0, {name: "test"});
$remove(被移除的对象)
假如要移除某个对象(注意,由于对象是按引用传递,因此不能简单用看起来一样的对象来移除某个对象),可以直接使用这个方法。具体代码是:
- <script>
- var test = {name: "test"};
- var vm = new Vue({
- el: '#app',
- data: {
- items: [
- {name: "a"},
- {name: "b"},
- {name: "c"}
- ]
- }
- })
- vm.items.push(test);
- function chagne() {
- vm.items.$remove(test);
- //vm.items.$remove({name: "test"}); //注意,这种写法是错误的
- }
- </script>
他相当于先用indexOf找到该对象的索引,再用splice来从数组中移除该对象。
Object.freeze(数组的对象元素)
假如数组中某一个元素(他是个对象)被Object.freeze冻结了,需要明确指定track-by,这种情况下,如果Vuejs不能自动追踪对象,将给出一条警告。
——不懂!——
反正被这样搞的对象,其值不能被修改,修改其值也没用(修改无效)
⑨$key用于获取被遍历对象的key值
即js代码中,for(var i in items)中的i,记得,在v-for里,其是items[i]
但仅对object对象生效,对数组无效(数组可以使用$index)
如代码:
- <div id="app">
- <ul>
- <li v-for="item in items" track-by="$index">{{$key}}: {{item}}</li>
- </ul>
- </div>
- <script>
- var test = {name: "test"};
- var vm = new Vue({
- el: '#app',
- data: {
- items: {
- name: "wd",
- age: "27",
- sex: "man"
- }
- }
- })
- </script>
显示内容为:
- name: wd
- age: 27
- sex: man
这个key也可以使用别名,方法很简单,标签如下写:
- <li v-for="(a_key,item) in items" track-by="$index">{{a_key}}: {{item}}</li>
这里的a_key就相当于$key
且他们之间不会互相冲突,并能同时使用。
注意:别名对数组有效,$key对数组无效
⑩遍历顺序:
按照Object.keys()的结果遍历
例如:
- var a = {a: 1, b: 2, c: 3};
- Object.keys(a)
其返回结果是:
- ["a", "b", "c"]
然后会按照这个顺序来遍历,但其结果可能会因为JavaScript引擎的不同而不同(受影响的是对象);
⑪v-for一个数字
可以对一个数字使用v-for,例如:
- <li v-for="(a_key,item) in 10" track-by="$index">{{a_key}}: {{item}}</li>
【1】这个数字可以是一个浮点数;
【2】从0开始,到小于这个数字的最大整数(例如10那么则到9,10.1则到10);
⑫显示过滤、排序后的结果:
【1】使用计算属性(computed),返回过滤、排序后的结果;
优点:可自定义,功能更强大,更灵活;
缺点:麻烦;
【2】使用内置过滤器filterBy和orderBy
链接:http://cn.vuejs.org/api/#filterBy
【3】filterBy
简单来说,如果没有被过滤的内容,则被过滤掉,
如果是对象,则对key和val都有效(都会被检索),
如代码:
- <div id="app">
- <input v-model="input"/>
- <p>请在输入框内输入内容,只会将符合条件的内容显示出来</p>
- <ul>
- <li v-for="item in items|filterBy input">{{item}}</li>
- </ul>
- </div>
- <script>
- var test = {name: "test"};
- var vm = new Vue({
- el: '#app',
- data: {
- input: "",
- items: {
- name: "wd",
- age: "27",
- sex: "man"
- }
- }
- })
- </script>
注意:
(1)假如输入‘a’,虽然name属性和age属性的值没有a,但是其key有,所以依然会显示;
(2)不能只对其值(如果v-for的是一个对象的话)过滤生效,比如
- <li v-for="item in items|filterBy input in 'item'">{{item}}</li>
是无效的写法!
(3)如果要使用(2)中的方法,必须只能面对对象数组;
如以下:
- <div id="app">
- <input v-model="input"/>
- <p>请在输入框内输入内容,只会显示name符合的</p>
- <ul>
- <li v-for="(key,item) in items|filterBy input in 'name'">age:{{item.age}},name:{{item.name}}</li>
- </ul>
- </div>
- <script>
- var test = {name: "test"};
- var vm = new Vue({
- el: '#app',
- data: {
- input: "",
- items: [
- {age: 1, name: "abc"},
- {age: 2, name: "ab"},
- {age: 3, name: "c"}
- ]
- }
- })
- </script>
(4)多字段过滤
如以下:
- <li v-for="(key,item) in items|filterBy input in 'name''age'">age:{{item.age}},name:{{item.name}}</li>
无论是age符合或者是name符合,都可以正常显示。
(5)动态多字段过滤
- <div id="app">
- <input v-model="input"/>
- <p>请在输入框内输入内容,只会显示name符合的</p>
- <ul>
- <li v-for="(key,item) in items|filterBy input in List">age:{{item.age}},name:{{item.name}}</li>
- </ul>
- <button @click="change">点击搜索age</button>
- </div>
- <script>
- var test = {name: "test"};
- var vm = new Vue({
- el: '#app',
- data: {
- input: "",
- List: "name",
- items: [
- {age: 1, name: "abc"},
- {age: 2, name: "ab"},
- {age: 3, name: "c"}
- ]
- },
- methods: {
- change: function () {
- this.List = "age";
- }
- }
- })
- </script>
(1)初始过滤name,点击按钮过滤age;
(2)List可以是字符串,也可以是数组;
(3)动态改变依然会生效;
【4】orderBy
用于排序的过滤,可以加参数,参数>=0则为正序排序,<0则为倒序排序
普通写法:
- <li v-for="(key,item) in items|orderBy 'age'">age:{{item.age}},name:{{item.name}}</li>
根据age值,正序排列,显示:
- age:2,name:ab
- age:3,name:c
- age:4,name:abc
- <li v-for="(key,item) in items|orderBy 'name' -1"> age:{{item.age}},name:{{item.name}}</li>
根据name,倒序排列(因为参数为-1,其<0),字符串的排列顺序为逐字母比较顺序。
也可以使用函数作为排序条件,具体而言,如代码:
- <div id="app">
- <input v-model="input"/>
- <p>请在输入框内输入内容,只会显示name符合的</p>
- <ul>
- <li v-for="(key,item) in items|orderBy test">age:{{item.age}},name:{{item.name}}</li>
- </ul>
- <button @click="test">点击搜索age</button>
- </div>
- <script>
- var test = {name: "test"};
- var vm = new Vue({
- el: '#app',
- data: {
- items: [
- {age: 5, name: "abc"},
- {age: 2, name: "ab"},
- {age: 13, name: "c"},
- {age: 33, name: "c"},
- {age: 3, name: "c"}
- ]
- },
- methods: {
- test: function (a, b) {
- return a.age - b.age;
- }
- }
- })
- </script>
他会根据age的值差进行排序,简单来说,a-b则为从小到大(这里指的是被排序的属性)),b-a则为从大到小。
如图结果为:
- age:2,name:ab
- age:3,name:c
- age:5,name:abc
- age:13,name:c
- age:33,name:c
Vuejs——(4)v-if、v-for的更多相关文章
- MySQL 系列(三)你不知道的 视图、触发器、存储过程、函数、事务、索引、语句
第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 第三篇:MySQL 系列(三)你不知道的 视图.触发器.存储过程.函数 ...
- 大白话说Java泛型(一):入门、原理、使用
文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java泛型(一):入门.原理.使用> 远在 JDK 1.4 版本的时候,那时候是没有泛型的概念的.当时 Java 程序员们写集合类的 ...
- [独孤九剑]Oracle知识点梳理(一)表空间、用户
本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...
- tomcat访问(access)日志配置、记录Post请求参数
tomcat访问(access)日志配置.记录Post请求参数 一.配置与说明 tomcat访问日志格式配置,在config/server.xml里Host标签下加上 <Valve classN ...
- Flask框架(二)—— 反向解析、配置信息、路由系统、模板、请求响应、闪现、session
Flask框架(二)—— 反向解析.配置信息.路由系统.模板.请求响应.闪现.session 目录 反向解析.配置信息.路由系统.模板.请求响应.闪现.session 一.反向解析 1.什么是反向解析 ...
- Flask框架(三)—— 请求扩展、中间件、蓝图、session源码分析
Flask框架(三)—— 请求扩展.中间件.蓝图.session源码分析 目录 请求扩展.中间件.蓝图.session源码分析 一.请求扩展 1.before_request 2.after_requ ...
- 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Asp.Net Core 项目实战之权限管理系统(4) 依赖注入、仓储、服务的多项目分层实现
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- UML类图(下):关联、聚合、组合、依赖
前言 上一篇文章UML类图(上):类.继承.实现,讲了UML类图中类.继承.实现三种关系及其在UML类图中的画法,本文将接着上文的内容,继续讲讲对象之间的其他几种关系,主要就是关联.聚合.组合.依赖, ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分(3)修改资料、修改密码
在上一篇博客中实现了用户的注销和登录,其实代码里落了点东西,就是用户登录要更新最后一次登录时间和登录IP,这次补上.今天做修改资料和修改密码,TryUpdateModel是新用到的东西. 目录: AS ...
随机推荐
- Android 开发 知晓各种id信息 获取线程ID、activityID、内核ID
/** * Returns the identifier of this process's user. * 返回此进程的用户的标识符. */ Log.e(TAG, "Process.myU ...
- 获取cxgrid footer内容
cxGridDBTableView1.DataController.Summary.FooterSummaryValues[4];
- 吴裕雄 python深度学习与实践(16)
import struct import numpy as np import matplotlib.pyplot as plt dateMat = np.ones((7,7)) kernel = n ...
- 详解网络传输中的三张表,MAC地址表、ARP缓存表以及路由表
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://dengqi.blog.51cto.com/5685776/1223132 一:M ...
- python re模块与正则表达式
首先要先继承re模块: import re re.findall() 方法 # 返回值为列表 \w 表示一个字符,为数字,字母,下滑线之一, \W匹配任意非数字,字母,下划线 print(re.fin ...
- [Ting's笔记Day8]活用套件carrierwave gem:(3)Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- 一个JavaBean和DTO转换的优秀案例
所有的JavaBean和DTO的互相转换接口,JavaBean转化成DTO或者DTO转换JavaBean: public abstract class Converter<A, B> { ...
- 【ESP8266】、ESP8266通讯使用的AT指令
一.AT指令介绍 AT(Attention), AT指令一般应用于终端设备和PC应用之间建立连接.通过AT指令来控制. 二.常用AT指令 AT指令主要分为: 基础AT指令,WIFI功能AT指令,TCP ...
- jq 切换功能toggle
---恢复内容开始--- $(document).ready(function () { $(".jianjie").click(function () { $(this).tog ...
- [剑指Offer]38-字符串的全排列
链接 https://www.nowcoder.com/practice/fe6b651b66ae47d7acce78ffdd9a96c7?tpId=13&tqId=11180&tPa ...