<!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. Java并发之线程

    在前面我们介绍的一些内容中,我们的程序都是一条执行流,一步一步的执行.但其实这种程序对我们计算机的资源的使用上是低效的.例如:我们有一个用于计算的程序,主程序计算数据,在计算的过程中每得到一个结果就需 ...

  2. MySQL在高版本需要指明是否进行SSL连接问题

    Java使用mysql-jdbc连接MySQL出现如下警告: Establishing SSL connection without server's identity verification is ...

  3. [我所理解的REST] 3.基于网络应用的架构

    上篇中解释到什么是架构风格和应该以怎样的视角来理解REST(Web的架构风格).本篇来介绍一组自洽的术语,用它来描述和解释软件架构:以及列举下对于基于网络的应用来说,哪些点是需要我们重点关注的. 1 ...

  4. 【1414软工助教】博客链接和coding链接

    某些同学提供的coding.net用户名无法访问.请同学们自己点击自己的两个链接,如果发现有错,请在本博客的评论区给出正确的链接. 格式为: 学号后3位 链接 例如:***502 https://co ...

  5. 【集美大学1411_助教博客】个人作业3——个人总结（Alpha阶段） 成绩

    写在前面的话 大家都在总结中说自己学到了很多,那大家都学到了什么呢?如果你不写出来,你真的知道自己学到了什么吗?在自我总结阶段一般写得比较具体的同学,我都给了高分,比如出现了什么具体问题,我们是使用了 ...

  6. swing-窗体添加背景图片的2种方法

    在美化程序时,常常需要在窗体上添加背景图片.通过搜索和测试,发现了2种有效方式.下面分别介绍.1.利用JLabel加载图片利用JLabel自带的setIcon(Icon icon)加载icon,并设置 ...

  7. 团队作业4——第一次项目冲刺（Alpha版本）7th day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 在计时模式下能够记录用户的用户名和成绩,没有弄登录功能, 将程序定义为单机的 未完成的卡片为登录功能和使用QQ登录. 四.困难 ...

  8. 201521123111《Java程序设计》第14周学习总结

    本次作业参考文件 MySql操作视频与数据库相关jar文件请参考QQ群文件. 1. 本周学习总结 1.1 以你喜欢的方式(思维导图.Onenote或其他)归纳总结多数据库相关内容. 连接数据库前,应先 ...

  9. 201521123065《java程序设计》第9周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 出现的异 ...

  10. POJ-3045 Cow Acrobats (C++ 贪心）

    Description Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away a ...