<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="main">
        <div v-if="ok">
            Sorry
        </div>
        <div v-else>
            <span @click="add">
               Not sorry
            </span>

        </div>

        <div v-show="ok" @click="add">
            show
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:".main",
            data:{
                ok:true
            },
            methods:{
                add(){
                    this.ok=!this.ok;
                }
            }
        })
    </script>
</body>
</html>

Vue的条件渲染的更多相关文章

  1. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  2. vue的条件渲染和列表渲染介绍

    一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...

  3. 前端框架之Vue(5)-条件渲染

    v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...

  4. vue基础——条件渲染

    一.v-if 1.1.v-if,v-else 在字符串模板中,比如Handlebars,我们得像这样写一个条件块: HTML <!-- Handlebars 模板 --> {{#if ok ...

  5. Vue v-if条件渲染

    1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  6. vue基础---条件渲染

    (1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...

  7. VUE：条件渲染和列表渲染

    条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. vue.js条件渲染 v-if else-if v-for

    v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...

  9. Vue.js 条件渲染 v-if、v-show、v-else

    v-if  v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. 1 2 3 ...

  10. 第六十三篇：Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

随机推荐

  1. C# IComparable 和 IComparer 区别

    理解很重要: 开始对这两个接口的区别一直是很模糊,看到很多书后,终于知道了区别,形成了个人的理解: 关于 IComparable 比喻一个类person实现了 IComparable,那么它就要重写C ...

  2. 【★】深入BGP原理和思想【第一部】

    前言:学思科技术我想说,浅尝辄止,不是天才千万别深钻.和我研究高等数学一样,越深入就会发现越多的问题与不合理之处.尤其对于IT界,算法的最终解释权还是掌握在老外手中,所以对于有些细节,我们" ...

  3. 转：【Java并发编程】之九：死锁（含代码）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17200937 当线程需要同时持有多个锁时,有可能产生死锁.考虑如下情形: 线程A当前持有互 ...

  4. 个人总结-Alpha阶段

    一.个人总结 经过几周的Alpha阶段,对于软件设计有了大概的认识,也深刻感觉到一款软件设计出来的不易,每款软件背后都是开发人员辛勤的汗水.在软件开发的过程中,也是会出现很多的问题,出现各种各样的bu ...

  5. Java单元测试之覆盖率统计eclemma

    安装 有两种安装方法 下载安装(推荐) 地址: http://sourceforge.net/projects/eclemma/ 将解压后的features和plugins目录下的文件分别拷贝到Ecl ...

  6. 团队作业10——项目复审与事后分析（Beta版本）

    油炸咸鱼24点APP 团队作业10--事后诸葛亮分析; 团队作业10--Beta阶段项目复审;

  7. 201521123035《Java程序设计》第四周学习总结

    本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 本周还讲了注释与类设计.老师用例子向我们展示实际生活中一个类里面包含了哪些属性,并由此联想到如果自 ...

  8. 201521123085《Java程序设计》第4周学习总结

    1.本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 2.书面作业 Q1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) Q2.面向对 ...

  9. java课程设计团队博客

    java课程设计 本组主题:Calculator(简易计算器) 功能要求:基本实现计算器的功能,可运行加.减.乘.除.求倒数.求平方根.求百分号运算.正负数运算等 一.团队介绍 团队名称:熬夜做不出随 ...

  10. Linux SDK之uClinux、Broadcom、Atheros、Realtek、Ralink、Marvell、Intel

    接触的Linux SDK越来越多,整理整理,分享分享,不求系统全面,对您有帮助便足矣 文中大部分是与AP/Router SoC解决方案(单芯片WIFI 路由器解决方案)相关的Linux SDK SDK ...