<!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. UCOSii项目在NIOSii上的移植

    概览 本次使用Altera公司的NIOS II软核. 使用Quatus工具生成BSP并利用BSP打包工具生成UCOSII嵌入环境. 手动书写LCD驱动与显示函数,对UCOS II加入简单图像显示接口. ...

  2. 玩一把JS的链式调用

    链式调用我们平常用到很多,比如jQuery中的$(ele).show().find(child).hide(),再比如angularjs中的$http.get(url).success(fn_s).e ...

  3. 为什么会需要消息队列(MQ)？

    为什么会需要消息队列(MQ)? #################################################################################### ...

  4. Tomca软件介绍和安装

    Web开发入门 软件的结构: C/S (Client - Server  客户端-服务器端) 典型应用:QQ软件 ,飞秋,红蜘蛛. 特点: 1)必须下载特定的客户端程序. 2)服务器端升级,客户端升级 ...

  5. 【集美大学1411_助教博客】团队作业1——团队展示&选题 成绩

    第一次团队作业已经新鲜出炉啦,各位同学请查收.截止日期前,全班都按时提交了作业,而且有的团队还提交了两次呢,下次不要这样啦~ 题目 团队作业1--团队展示&选题 回顾 个人作业1--四则运算题 ...

  6. 201521123033《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. answer: 1.2 使用常规方法总结其他上课内容. answer:学了继承以及各种关键字 2. 书面作业 1.注释的应用 使用类 ...

  7. 201521123022 《Java程序设计》 第十三周学习总结

    1. 本周学习总结 2. 书面作业 Q1. 网络基础 Q1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 前者IP ...

  8. Eclipse rap 富客户端开发总结(9) ： rap上传与下载

    一 上传 上传即将文件上传到服务器上,在客户端需要写相应的脚本,服务器端需要注册相应的 handle 接受客户端的请求. 原理: Rap 的上传和下载是通过普通的 web 的方式进行上传和下载的 ,  ...

  9. Spring第八篇【XML、注解实现事务控制】

    前言 本博文主要讲解Spring的事务控制,如何使用Spring来对程序进行事务控制-. 一般地,我们事务控制都是在service层做的..为什么是在service层而不是在dao层呢??有没有这样的 ...

  10. 详解go语言的array和slice 【二】

    上一篇已经讲解过,array和slice的一些基本用法,使用array和slice时需要注意的地方,特别是slice需要注意的地方比较多.上一篇的最后讲解到创建新的slice时使用第三个索引来限制sl ...