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. docker深入学习一

    docker是一个客户服务器结构的应用程序,其结构如下所示 其组成部分包括 container容器:是image的运行实例,一般container之间以及container与主机之间是相互隔离的,相当 ...

  2. 「APIO2016」烟花表演

    「APIO2016」烟花表演 解题思路 又是一道 solpe trick 题,观察出图像变化后不找一些性质还是挺难做的. 首先令 \(dp[u][i]\) 为节点 \(u\) 极其子树所有叶子到 \( ...

  3. UOJ185 ZJOI2016 小星星 容斥、树形DP

    传送门 先考虑一个暴力的DP:设\(f_{i,j,S}\)表示点\(i\)映射到了图中的点\(j\),且点\(i\)所在子树的所有点映射到了图中的集合\(S\)时的映射方案数,转移暴力地枚举子集即可, ...

  4. Luogu4240 毒瘤之神的考验 莫比乌斯反演、根号分治

    传送门 首先有\(\varphi(ij) = \frac{\varphi(i) \varphi(j) \gcd(i,j)}{\varphi(\gcd(i,j))}\),把欧拉函数的定义式代入即可证明 ...

  5. LOJ3119 CTS2019 随机立方体 概率、容斥、二项式反演

    传送门 为了方便我们设\(N\)是\(N,M,L\)中的最小值,某一个位置\((x,y,z)\)所控制的位置为集合\(\{(a,b,c) \mid a = x \text{或} b = y \text ...

  6. C#_WPF中创建二维码、识别二维码

    第三方库: WPFMediaKit.dll (WPFMediaKit摄像头处理) zing.dll NuGet安装这两个第三方dll 项目截图预览: 项目代码: using System; using ...

  7. js编写日历的思路

    首先写出一个日历我们需要考虑以下2个问题: 每个月的总天数 每个月的第一天周几 这里提供了一个判断平年闰年2月份天数的方法: function leapYear(year) { return (yea ...

  8. UCOSII消息队列

    主结构体 typedef struct os_q { /* QUEUE CONTROL BLOCK */ struct os_q *OSQPtr; /* Link to next queue cont ...

  9. 软件设计师【UML】

    一.概述 二.核心概念 1.用例图 1.包含关系 当可以从两个或两个以上的用例中提取公共行为时,应该使用包含关系来表示他们.其中这个提取出来的公共用例称为抽象用例,而把原始用例称为基本用例或基础用例. ...

  10. OPENWRT使用华为 E353/E3131的4G转WIFI路由器作为WAN接口上网(笔记)

    参考文档: http://www.yizu.org/archives/721/ 原来使用Hilink模式真的很简单 1.安装一些包: opkg install kmod-usb-net-rndis k ...