vue学习笔记---class与style绑定以及条件渲染
2018-01-30 16:26
543 查看
绑定HTML Class
#对象语法
我们可以传给 v-bind:class一个对象,以动态切换class
上面的语法表示active这个class存在与否取决于属性isActive的truthiness,可以在对象当中传入多个属性来动态切换class
条件渲染
#用key管理可复用的元素
#v-show另一个用于根据条件展示元素的选项是v-show指令
<h1 v-show="ok">Hello!</h1>不同的是带有v-show指令的元素始终会被渲染保存在DOM中,v-show只是简单的切换css的display属性
#对象语法
我们可以传给 v-bind:class一个对象,以动态切换class
<div v-bind:class="{ active: isActive }"></div> |
v-bind:class指令也可以与普通的 class 属性共存。
条件渲染
#用key管理可复用的元素
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> |
<h1 v-show="ok">Hello!</h1>不同的是带有v-show指令的元素始终会被渲染保存在DOM中,v-show只是简单的切换css的display属性
v-show不支持
<template>元素,也不支持
v-else
#v-if 与 v-show的区别
v-if是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,
v-show就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。一般来说,
v-if有更高的切换开销,而
v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用
v-show较好;如果在运行时条件很少改变,则使用
v-if较好。v-if与v-for一起使用:v-for的优先级更高!
相关文章推荐
- Vue.js笔记第二波,Class 与 Style 绑定,条件渲染,列表渲染
- vue.js学习笔记之绑定style样式和class列表
- vue学习笔记 样式 class style(五)
- Vue学习—Class与Style绑定
- Vue.js笔记-计算属性 class与style绑定
- vue笔记----class和style绑定
- vue学习笔记1——v-if和templete 条件渲染 使用 key 控制元素的可重用
- Vue.js 学习5 Class与Style绑定
- vue学习记录(数据绑定、class,style绑定)
- 学习使用vue.js(五)绑定Style 与Class
- Vue.js实例学习:Class 与 Style 绑定
- Vue.js学习笔记:v-bind属性绑定(class,src)
- React学习笔记之条件渲染(一)
- vue.js学习笔记之安装以及项目的创建和运行
- Vue学习笔记之表单输入控件绑定
- 5.3.vue入门基础学习笔记-基础指令介绍(属性绑定v-bind)
- vue.js动态数据绑定学习笔记
- OpenGL学习笔记(二):OpenGL语法、渲染管线以及具体实现过程详解
- Vue学习笔记(1) 一开始的使用以及Vue实例的详解
- Vue.js入门学习--v-if 组合 v-else-if条件指令渲染DOM(三)