• v-if
  • v-show
  • v-else

一、v-if:生成或者移出一个元素

 <div id="example">
<button v-on:click="ifEvent">点击</button>
<p v-if="greeting">hello</p>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
greeting:true
},
methods:{
ifEvent(){
this.greeting = !this.greeting;
}
}
});
</script>

v-if表达式采用boolean值切换元素生成与删除,由于节点生成和删除会有较高的性能消耗,如果需要一次生成和删除多个元素时,可以采用<template>元素作为包装元素,在包装元素上使用v-if指令,最终的渲染结果不会包含包装元素,看示例:

 <div id="example">
<button v-on:click="ifEvent">点击</button>
<div>
<template v-if="greeting">
<h2>我是标题</h2>
<p>我是简介</p>
<p>我是内容</p>
</template>
</div>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
greeting:true
},
methods:{
ifEvent(){
this.greeting = !this.greeting;
}
}
});
</script>

渲染结果:

由于v-if采用的是生成和删除节点,除非在一些购物车等特定应用场景下需要生成和删除节点,多数情况下的需求是只需要做显示和隐藏,所以这时候就没有必要删除节点,仅仅只需要对节点操作display样式实现即可,所以接下来介绍v-show指令。

二、v-show:展示或隐藏一个元素

 <div id="example">
<button v-on:click="ifEvent">点击</button>
<div v-show="greeting">hello</div>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
greeting:true
},
methods:{
ifEvent(){
this.greeting = !this.greeting;
}
}
});
</script>

通过v-show来实现展示和隐藏,实际上就是操作元素的display的样式属性,比如示例中的div在被隐藏是的元素结构是:

然需要注意的是v-show不支持<template>语法。

vi-if是惰性的,如果在初始渲染时条件为假则什么都不做,只有在条件为真时才会编局部编译渲染,并且编译会被缓存起来。

既然有v-if的存在,v-else怎么能少呢?

三、v-else

v-else指令的语法含义跟javascript中的else一致,必须跟v-if配合使用,但不能与show一起使用。

 <div id="example">
<button v-on:click="ifEvent">点击</button>
<div v-if="greeting">我是会员</div>
<div v-else="greeting">我是超级会员</div>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
greeting:true
},
methods:{
ifEvent(){
this.greeting = !this.greeting;
}
}
});
</script>

如果是v-show也需要实现切换的话可以采用非值来实现,比如上面的v-else可以使用下面这样的方式来实现:

<div v-show="!greeting">我是超级会员</div>

vue入门:(条件渲染)的更多相关文章

  1. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  2. vue的条件渲染和列表渲染介绍

    一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...

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

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

  4. vue基础——条件渲染

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

  5. Vue v-if条件渲染

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

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

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

  7. VUE:条件渲染和列表渲染

    条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

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

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

  9. Vue.js 条件渲染 v-if、v-show、v-else

    v-if  v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. 1 2 3 ...

  10. 第六十三篇:Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

随机推荐

  1. 基于SAR对Linux资源的监控shell脚本

    #! /bin/bash ] # $# 传递给脚本或函数的参数个数 then 脚本名称 exit -; fi SLEEP_TIME=$ LOG=$ while true do #线程数 thread_ ...

  2. router-link跳转页面传递参数及页面刷新方法

    使用router-link传参: 第一种: 路径:http://localhost:8080/goodListP?id=2 跳转的页面获取参数: this.$route.query.id 第二种: 路 ...

  3. Git(3):分支管理

    Git 分支管理 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作. 创建分支命令 $git branch <branch n ...

  4. python常见队列queue分类

    import queue # 1.普通q# 2.先进后出q# 3.优先级q 普通Queue q=queue.Queue(3)q.put(1)q.put(2)q.put(3)print(q.get()) ...

  5. 彻底搞懂 Elasticsearch Java API

    说明 在明确了ES的基本概念和使用方法后,我们来学习如何使用ES的Java API. 本文假设你已经对ES的基本概念已经有了一个比较全面的认识. 客户端 你可以用Java客户端做很多事情: 执行标准的 ...

  6. 页面元素定位-----android真机

    一.移动终端开发者选项启用USB调试模式 二.USB线连接移动终端,CTRL+R启动DOS窗口,输入:adb devices,出现以下信息,说明连接成功 三.启动appium,配置appium相关信息 ...

  7. PTA(Advanced Level)1075.PAT Judge

    The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...

  8. oracle报:ORA-01034和ORA-27101的解决办法

    出现ORA-01034和ORA-27101的原因是多方面的:主要是oracle当前的服务不可用,shared memory realm does not exist,是因为oracle没有启动或没有正 ...

  9. #import "msado15.dll" no_namespace rename("EOF","adoEOF")

    引入动态链接库msado15.dll的信息, no_namespace--无命名空间 rename(“EOF”,“adoEOF”)--把文件结束符“EOF”,更换成“adoEOF”

  10. STL queue 常见用法详解

    <算法笔记>学习笔记 queue 常见用法详解 queue翻译为队列,在STL中主要则是实现了一个先进先出的容器. 1. queue 的定义 //要使用queue,应先添加头文件#incl ...