1.test008.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
<body>
<!--
1.条件渲染指令
    v-if
    v-else
    上面两个做影藏是是通过把标签移除,需要再创建一个在显示出来
    v-show
    通过样式来影藏,内存中对象还在
2.比较v-if与v-show
    如果需要频繁切换用v-show较好
-->
<div id="demo">
    <p v-if="ok">成功了</p>
    <!--v-else="true"=v-else-->
    <p v-else>失败了</p>

    <p v-show="ok">表白成功</p>
    <p v-show="!ok">表白失败</p>
    <!--厉害了-->
    <button @click="ok=!ok"> 切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#demo',
        data:{
            //需要有标识属性来标识是否成功了
            ok:false
    }
    })
</script>
</body>
</html>
2.页面显示:

点击按钮后:

厉害了!!!

(尚008)Vue条件渲染的更多相关文章

  1. Vue条件渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...

  2. Vue#条件渲染

    根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...

  3. [vue]vue条件渲染v-if(template)和自定义指令directives

    条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...

  4. vue 条件渲染与列表渲染

    本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...

  5. vue 条件渲染 v-if v-show

    1.要点 1.1 v-if     条件性地渲染一块内容 <h1 v-if="awesome">Vue is awesome!</h1> 附带  /  v- ...

  6. vue条件渲染2

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. (尚009)Vue列表渲染

    变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面. 1.test009.html <!DOCTYPE html><html lang=& ...

  8. vue 条件渲染v-if v-show

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue 条件渲染方式

    1.通过class绑定 <div :class="{'div-class': this.align == 'center'}"></div> 对应的css ...

随机推荐

  1. SAS学习笔记63 如何导出Log

    如上,将Log输出,然后又恢复到SAS系统里面的Log,把需要运行的程序放到他们中间就可以了.这种方法不会出现Log打印满了的情况 这种是先输出在SAS系统里面,然后在输出,在SAS里面Log的行是有 ...

  2. Docker学习笔记（一）—— 概述

    1. Docker是个什么玩意 说Docker是什么之前,先来看一看Docker为什么会出现.我们知道,在学习过程中我们需要频繁地安装配置一些软件,不管是在Windows下还是在Linux,这些东西的 ...

  3. Steam之两个list间交集、并集、差集

    public static void main(String[] args) { List<String> list1 = new ArrayList(); list1.add(" ...

  4. 常用 SQL*Plus 命令

    一些常用的 SQL*Plus 命令: 一.Help 命令 SQL*Plus 提供了help 命令来帮助用户查询指定的命令的选项.help 可以向用户提供被查询命令的标题.功能描述.缩写形式和参数选项( ...

  5. Kconfig和Makefile

    内核源码树的目录下都有Kconfig和Makefile.在内核配置make menuconfig时,从Kconfig中读出菜单,用户勾选后保存到.config中.在内核编译时,Makefile调用这个 ...

  6. rabbitmq实战：一、天降奇兵

    缘由,最近换了工作,而新的项目中使用了celery+rabbitmq来实现一个分布式任务队列系统,为了能够维护好这套系统,只能来学习一下这两个组件,顺便把学习笔记记录下来,留作以后回顾,当然如果碰巧能 ...

  7. Topshelf+Quartz实现windows任务

    Topshelf使用示例, HostFactory.Run(x => { x.Service<QuartzStartup>(s => { s.ConstructUsing(na ...

  8. 【English】 Re-pick up English for learning big data (not updated regularly)

    2019.10.6 parse:解析mean:平均数stddev:标准偏差 2019.10.7 bigdata platform:大数据平台 2019.10.14 allocate resource ...

  9. Android笔记（五十一） 短信验证码集成——mob平台

    官方网站:www.mob.com 注册帐号,下载SDK,导入SDK就不说了,主要写一下简单集成如何使用,以后忘记了也可以翻着看看. 详细的可以参考官方文档: http://wiki.mob.com/a ...

  10. 【转】常见的tcp/ip协议的知识

    1.tcp/ip协议的层数 左图是osi 7层模型,右图是tcp/ip 4层模型.二者对应关系如上. 2.socket中TCP的三次握手建立连接详解 我们知道tcp建立连接要进行“三次握手”,即交换三 ...