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. 12 IO流（九）——装饰流 BufferedInputStream/OutputStream

    我们按功能可以将IO流分为节点流与处理流 节点流:可以直接从数据源或目的地读写数据 处理流(装饰流):不直接连接到数据源或目的地,是其他流(必须包含节点流)进行封装.目的主要是简化操作和提高性能. B ...

  2. Linux+QT界面开发（含数据库）小结

    今天十一国庆节,过了一个很有意义的国庆节,去了龙岗区图书馆,第一次知道了借的书可以在任意分馆归还!这个切实方便了广大读者.针对Linux应用,特意借阅一本:<linux环境下Qt4图形界面与My ...

  3. chmod: changing permissions of 'xxx': Operation not permitted

    众所周知,在linux系统中,权限最大的是root账号,但凡修改涉及到系统本身的重大权限的操作,都需要root的权限才能操作.但是有些时候也有root干不了的事情. 比如:chmod: changin ...

  4. WebApi接收接收日期格式参数时，日期类型（2019-10-08T16:00:00.000Z）后台接收时间少8小时问题

    前端使用的是elementui的日期控件,将日期格式的数据提交到webapi后台时,接收到的日期格式少了8小时,这个原因是由于时区引起的,应该在WebApiConfig进行配置转成本地时间,解决少8小 ...

  5. Part_one:Redis第一次接触

    1.redis学习 数据默认写入到内存,如果断电,服务器宕机,redis进程挂掉,数据会丢失. selenium操作浏览器时,要注意浏览器资源释放,方式内存泄露,崩溃 mysql是文件型数据库,默认持 ...

  6. vue动态加载图片

    如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...

  7. DDL 操作数据库

    DDL 操作数据库:常用的操作 CRUD 一.C(create)创建 1.创建数据库 create database 数据库名称; 2.创建数据库,判断是否存在,再创建(如果存在,就不再创建) cre ...

  8. Imagetragick RCE（CVE-2016–3714）复现

    CVE-2016–3714: 闲着没事突然想起这个洞来,借用vulhub复现一下 poc有很多:https://github.com/ImageTragick/PoCs 我用的 push graphi ...

  9. java web编程 servlet2

    一般在开发的过程中主要用一个doGet和doPost方法, http就是超文本传输协议,这是java API对servlet的描述 : 一般我们调用的方法细则如下 : service一分为二reque ...

  10. [转] 雷电三和typec傻傻分不清

    原文:https://club.lenovo.com.cn/thread-4921715-1-1.html 因为形状完全一致,所以很多人都误以为Type-C=雷电3. 实际上,雷电3只是采用了Type ...