<!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. Maven（一）初识Maven

    前言 在这之前一直都有去看关于Maven的相关介绍,但是没有到真正要用的时候,自己总是以为懂了.其实真的感觉Maven并没有想象的那么简单! 那我们该怎么去学习maven呢?接下来我将从: 初步认识m ...

  2. VHDL学习记录

    VHDL全名Very-High-Speed Integrated Circuit Hardware Description Language ,是一种标准硬件描述语言.下面通过60进制计数器来分析VH ...

  3. 后台方庄List razor 循环

    后台: //1.查询所有年卡类型                StringBuilder sqlStr = new StringBuilder();                sqlStr.Ap ...

  4. Error:Failed to load project configuration:xxxxxxxxxxxxxxxxxxxx cannot read file .idea/misc.xml

    你这idea不会没有配置默认jdk吧?你看看File--other settings--default project structure,看看project setting的project里面,有没 ...

  5. 201521123101 《Java程序设计》第8周学习总结

    1. 本周学习总结 2. 书面作业,本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 学习使用泛型,熟悉定义泛型,熟悉List中实现删除 2.统计文字中的单词数量并按出现 ...

  6. 201521123064 《Java程序设计》第5周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 对匿名内部类的印象很深(内部类类部类内部内--).总结一下,匿名内部类也就是没有 ...

  7. 201521123002 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 2. 书面作业 作业参考文件下载 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能 ...

  8. 201521123062 《Java程序设计》第3周学习总结

    1.本周学习总结 二.书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; pu ...

  9. 201521123039 《java程序设计》第一周学习总结(新）

    1.本章学习总结 -Java是面向对象的程序语言,它一切定义都是对象.我们所编写的Java程序经过编译后生成了.class的文件,再经过JVM对.class解释运行就可以得到Java程序,所以Java ...

  10. [转载]Eclipse自定义快捷键导出和导入方法

    背景: 以前做C/C++开发,习惯了Visual Studio这个强大的IDE,转到安卓开发后,用到蛋疼的Eclipse,实在不习惯,而且以前总觉得VS不流畅,现在才知道VS很好,才知道什么是真正的& ...