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. 13 IO流（十）——BufferedReader/BufferedWriter 装饰流

    Buffered字符包装流 与Buffered字节装饰流一样,只不过是对字符流进行包装. 需要注意的地方 Buffered字符流在Reader与Writer上有两个新的方法:String readLi ...

  2. OpenJDK自动安装脚本 InstallOpenJDK.vbs

    Oracle JDK 要收费了,Open JDK没有安装包,只有Zip,写了个安装脚本 InstallOpenJDK.vbs Rem ********************************* ...

  3. golang方法和函数的区别

  4. RabbitMQ学习记录1

    前言 我是在解决分布式事务的一致性问题时了解到RabbitMQ的,当时主要是要基于RabbitMQ来实现我们分布式系统之间对有事务可靠性要求的系统间通信的.关于分布式事务一致性问题及其常见的解决方案, ...

  5. The three day 给你一个有效的 IPv4 地址 address，返回这个 IP 地址的无效化版本

    """ 给你一个有效的 IPv4 地址 address,返回这个 IP 地址的无效化版本. 所谓无效化 IP 地址,其实就是用 "[.]" 代替了每个 ...

  6. Web Api 转

    GET:生到数据列表(默认),或者得到一条实体数据 POST:添加服务端添加一条记录,记录实体为Form对象 PUT:添加或修改服务端的一条记录,记录实体的Form对象,记录主键以GET方式进行传输 ...

  7. centos7 设置 查看 开机 启动项

    1.查看开机自启项centos7自启项已不用chkconfig改为:systemctl list-unit-files左边是服务名称,右边是状态,enabled是开机启动,disabled是开机不启动 ...

  8. dubbo源码阅读之服务导出

    dubbo服务导出 常见的使用dubbo的方式就是通过spring配置文件进行配置.例如下面这样 <?xml version="1.0" encoding="UTF ...

  9. element-ui tree 设置成单选，并且父级不可选

    <el-tree :data="date" //数据来源 show-checkbox //节点是否可被选择 node-key="moduldCode" / ...

  10. 设置yum自动更新

    [wang@brady ~]$ sudo yum -y install cronie yum-cron sudo vim /etc/yum/yum-cron.conf apply_updates = ...