基于 Laravel 的 Vue.js 学习
来源:互联网 发布:mac卸载软件 编辑:程序博客网 时间:2024/06/06 05:55
v-if
在字符串模板中,例如Handlebars,我们会这样编写一个条件区块:
<!-- Handlebars template -->{{#if ok}} <h1>Yes</h1>{{/if}}
在 Vue.js 中,我们通过v-if
指令来实现这一目的:
<h1 v-if="ok">Yes</h1>
还可以通过v-else
添加一个“else”区块:
<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
v-if 模板
由于v-if
是一个指令,需要添加到一个元素上,但是如果我们想要在多个元素间切换呢?在本例中我们可以在<template>
元素上使用v-if
,<template>
作为看不见的包装器,最终结果将不会包含它:
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>
v-show
另一个根据条件显示元素的方式是v-show
指令,使用方式和v-if
差不多:
<h1 v-show="ok">Hello!</h1>
不同之处在于使用v-show
的元素会一直渲染并保留在DOM中,v-show
只是简单切换元素的CSS属性display
。
注意v-show
不支持<template>
语法。
v-else
你可以使用v-else
指令为v-if
或v-show
添加一个“else区块”:
<div v-if="Math.random() > 0.5"> Sorry</div><div v-else> Not sorry</div>
v-else
元素必须紧跟在v-if
或v-show
元素后面,否则将不能被识别。
组件警告
将v-show
用于组件时,由于指令优先级问题v-else
将不能正常使用,所以不要这么做:
<custom-component v-show="condition"></custom-component><p v-else>This could be a component too</p>
将v-else
替换成另一个v-show
:
<custom-component v-show="condition"></custom-component><p v-show="!condition">This could be a component too</p>
这样就可以达到v-if
的效果。
v-if vs v-show
在切换 v-if
区块时,Vue.js 有一个局部编译/卸载过程,因为 v-if
里面的模板也可能包括数据绑定或子组件。v-if
是真正的条件渲染,因为它会确保条件区块在切换过程中合适地销毁和重建其中的事件监听器和子组件。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,v-show
简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说,v-if
有更高的切换消耗而 v-show
有更高的初始渲染消耗。因此,如果需要频繁切换则使用 v-show
较好,如果在运行时条件不大可能会改变则使用 v-if
更佳。
- 基于 Laravel 的 Vue.js 学习
- 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
- 【Laravel学习笔记】Laravel 5.4+Vue.js 初体验:Laravel下配置运行Vue.js
- JS-Vue/基于Vue.js的时钟
- laravel + vue.js
- vue.js的学习
- 使用Vue.js和Laravel构建的开源博客。
- 使用Vue.js和Laravel构建的开源博客。
- vue.js的学习01
- vue.js的基础学习
- 构建基于webpack的vue.js项目
- 基于Vue.js的表格分页组件
- 基于vue.js的分页插件
- 基于vue.js的直播项目设计
- 基于vue.js的小demo
- 基于vue.js的分页插件
- 基于vue.js的图像预览组件
- Vue.js 学习10 Element基于Vue2.0的组件库
- SuperSale UVA
- [USACO16OPEN]Closing the Farm_Silver(联通分量+逆向边处理+并查集)
- Android PatternMatcher
- iOS开发中静态库的制作
- RPC原理
- 基于 Laravel 的 Vue.js 学习
- oracle存储过程中的异常处理
- UVA.12716 GCD XOR (暴力枚举 数论GCD)
- SQL 撤销索引、表以及数据库
- 4. mlab控制函数
- node中mongoose操作数组类型字段
- RHCE——计划将来的LINUX任务
- ubuntu16.04利用samba共享文件夹
- 尽在双11