1 v-if

    1.1 简单使用
<h1 class="h1" v-if="ok">yes</h1>
<script>
var app1 = new Vue({
el: '.h1',
data: {
ok: true
}
});
</script>
<h2 class="h1" v-if="ok">yes</h2>
<h2 v-else>no</h2>
    ok为true两个都显示,false只显示v-else部分

    1.2 template中的if条件组 ????
v-if 是一个指令,需要将它添加到一个元素上。
但是如果我们想切换多个元素呢?此时我们可以把一个 <template> 元素当做包装元素,
并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。
<template id="t1" v-if="ok">
<h1>Title</h1>
<p>段落1</p>
<p>段落2</p>
</template>
    1.3 v-else
必须跟在v-if或v-else-if元素后面,否则无法识别 1.4 v-else-if 2.1.0新增,可以链式使用多次
必须跟在v-if 或v-else-if后面 1.5 用key管理可复用的元素
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。
这么做,除了使 Vue 变得非常快之外,还有一些有用的好处
        <template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
        在上面的代码中切换 loginType 将不会清除用户已经输入的内容。
因为两个模版使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的的 placeholder。
<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>
        每次input会被重新渲染 但label仍然被复用--未添加key值

    2 v-show
2.1 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 是简单地切换元素的 CSS 属性 display 。
注意, v-show 不支持 <template> 语法,也不支持 v-else。 3 v-if与v-show比较
v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,
则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。 4 v-if 与 v-for 一起使用
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

ch6-条件渲染(v-if v-else v-else-if key管理可复用元素 v-show )的更多相关文章

  1. Vue v-if条件渲染

    1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  2. vue之条件渲染

    一.v-if v-if指令用于条件的渲染一块内容,当指令的表达式返回true时,内容才会被渲染. <h1 v-if="isshow">要显示么</h1> d ...

  3. 前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

    一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...

  4. Vue语法学习第五课——条件渲染

    ① v-if .v-else-if .v-else <div v-if="type === 'A'"> A </div> <div v-else-if ...

  5. 前端框架之Vue(5)-条件渲染

    v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...

  6. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  7. vue基础---条件渲染

    (1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...

  8. vue学习笔记(五)条件渲染和列表渲染

    前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...

  9. vue.js条件渲染 v-if else-if v-for

    v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...

随机推荐

  1. 微信小程序开发心得--动画机制

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认 ...

  2. 后台方庄List razor 循环

    后台: //1.查询所有年卡类型                StringBuilder sqlStr = new StringBuilder();                sqlStr.Ap ...

  3. test文件伪装

    该文件属于伪装图片类型.图片另存后把后缀改为rar将看到txt文件. 利用了 cmd cp  /b  命令 命令格式:copy /b 文件1+文件2+......文件N 合并后的文件名<br&g ...

  4. 《Java程序设计》终极不改版

     半年前的作品,上传只为纪念~ 成绩: ____0.1______ Java程序设计  课程设计 题 目:大学生信息管理系统 学 院:  计算机与软件学院 专 业:     网络工程_____­ .  ...

  5. Java学习9——面向对象

    (重点:内存分析) 类的定义 //用class关键字定义一个类 class Person { //成员变量定义 private int id; private int age = 20; //方法定义 ...

  6. 201521123031 《Java程序设计》第4周学习总结

    ---恢复内容开始--- 1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. (1)父类只能有一个,即单继承,子类继承父类的全部成员(属性和方法 ...

  7. Java-Preferences用法-入门

    Properties提供的应用程序解决方案主要存在两个问题: (1)配置文件不能放在主目录中,因为某些OS(如Win9X)没有主目录的概念: (2)没有标准的文件命名规则,存在文件名冲突的可能性. J ...

  8. LINUX - awk命令之NF和$NF区别 (转)

    NF和$NF 区别问答:(转)1.awk中$NF是什么意思?#pwd/usr/local/etc~# echo $PWD | awk -F/ '{print $NF}'etcNF代表:浏览记录的域的个 ...

  9. centOS7网络配置(nmcli,bonding,网络组)

    关于网络接口命名 CentOS 6之前,网络接口使用连续号码命名: eth0. eth1等,当增加或删除网卡时,名称可能会发生变化.CentOS 7使用基于硬件,设备拓扑和设置类型命名. 网卡命名机制 ...

  10. 06jQuery-01-基本选择器

    1.jQuery概要 JavaScript的一个库,只是一个jquery-xxx.js的文件,它可以让你写更少的代码,做更多的事. $是著名的jQuery符号.实际上,jQuery把所有功能全部封装在 ...