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. 【LEETCODE】48、867. Transpose Matrix

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...

  2. （父向子传值）组件内的properties类似与vue中的prop接收外界传递进来的参数

    =================================================== 外界引用组件的时候 传递方法  父传子

  3. Spring Cloud--实现Eureka的高可用（Eureka集群搭建）实例

    将10086注册到10087上: 再在10086服务的基础上复制一个Eureka的服务,端口为10087,将其注册到10086上: application-name的名称保持一致,只是一个服务的两个实 ...

  4. Codeforces Round #567 Div. 2

    A:签到. #include<bits/stdc++.h> using namespace std; #define ll long long #define inf 1000000010 ...

  5. Crontab详细用法-定时任务详解

    crontab是linux系统或unix系统中常用的定时命令,使用crontab你可以在指定的时间执行一个shell脚本或者一系列Linux/unix命令.例如系统管理员安排一个备份任务使其每天都运行 ...

  6. RESTful 的学习总结

    RESTful 的核心思想就是,客户端发出的数据操作指令都是"动词 + 宾语"的结构.比如,GET /articles这个命令,GET是动词,/articles是宾语.动词通常就是 ...

  7. 直线DDA，直线和圆的Bresenham算法

    // DDA.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<Windows.h> #include<g ...

  8. 你有自信写while(true)吗？

    每次写while(true)的时候会不会心虚? 特别逻辑稍微复杂一点

  9. 【洛谷 P3224】 [HNOI2012]永无乡（Splay，启发式合并）

    题目链接 启发式合并就是暴力合并把小的合并到大的里,一个一个插进去. 并查集维护连通性,同时保证并查集的根就是所在Splay的根,这样能省去很多操作. #include <cstdio> ...

  10. MySql注释的写法

    每一种语言都有它的注释方式,代码量少的时候还可以,随着代码量越来越多,代码注释的重要性也越发凸显. 在mysql中主要有三种方式: 1.常用的方式,跟在css中那些注释一样 :/* 内容 */ /* ...