v-show指令：v-show="true/false" 控制元素显示/隐藏

1.使用

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    isShow:false,

                },

                methods:{

                    toggle:function(){

                        this.isShow = !this.isShow;

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="button" value="toggle" v-on:click="toggle()"> <br />

        <div v-show="isShow" style="width: 100px;height: 100px;background: red"></div>

    </div>

</body>

</html>

效果：

Vue2学习笔记:v-show指令的更多相关文章

  1. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  2. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  3. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  4. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  5. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  6. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  7. JVM学习笔记——字节码指令

    JVM学习笔记——字节码指令 字节码 0与 1是计算机仅能识别的信号,经过0和1的不同组合产生了数字之上的操作.另外,通过不同的组合亦产生了各种字符.同样,可以通过不同的组合产生不同的机器指令.在不同 ...

  8. 汇编学习笔记(11)int指令和端口

    格式 int指令也是一种内中断指令,int指令的格式为int n,n是中断类型码.也就是说,使用int指令可以调用任意的中断例程,例如我们可以显示的调用0号中断例程,还记得在汇编学习笔记(10)中我们 ...

  9. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  10. AngularJS1.X学习笔记8-自定义指令（上）

    AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...

随机推荐

  1. sql返回行id

    1.sql语句中 insert into tableName() output inserted.id values() 2 .存储过程中 ALTER PROCEDURE dbo.getBuyMedi ...

  2. 【.Net】含Unicode的字符串截断 VB.NET C#

    Function AnsiLeftB(ByVal strArg As String, ByVal arg1 As Integer) As String Dim unicodeEncoding As E ...

  3. Hdfs数据备份

    Hdfs数据备份 一.概述 本文的hdfs数据备份是在两个集群之间进行的,如果使用snapshot在同一个集群上做备份,如果datanode损坏或误操作清空了数据,这样的备份就无法完全保证数据安全性. ...

  4. 美赛LaTeX急救指南

    目录 1 关于easymcm宏包的基本信息,以及编译系统的若干问题 2 图片.表格.数学公式.网址的处理 3 样式.字体字号.段落的设置 4 目录.交叉引用的相关问题 关于标题不能换行的问题:这里有解 ...

  5. SSH框架搭建步骤总结以及Hibernate二级缓存，查询缓存

    二级缓存.查询缓存 一级缓存: 默认启动,生命周期是和session同步的,session独享 二级缓存: 需要加载配置信息,生命周期是和应用服务器同步,session共享 1:在hibernate. ...

  6. JS数组sort比较函数

    转载:http://www.cnblogs.com/ljchow/archive/2010/06/30/1768683.html 我们知道,数组的sort方法可以对数组元素进行排序,默认是按ASCII ...

  7. C#基础笔记(第十三天)

    1.复习泛型集合List<T>Dictionary<Tkey,Tvalue>装箱和拆箱装箱:把值类型转换为引用类型拆箱:把引用类型转换为值类型 我们应该尽量避免在代码中发生装箱 ...

  8. __block和__weak修饰符的区别

    block下循环引用的问题 __block本身并不能避免循环引用,避免循环引用需要在block内部把__block修饰的obj置为nil __weak可以避免循环引用,但是其会导致外部对象释放了之后, ...

  9. Java基础教程(14)--嵌套类

      Java允许在一个类中定义另外一个类,这样的类被称为嵌套类,就像下面这样: class OuterClass { ... class NestedClass { ... } }   嵌套类分为两种 ...

  10. 前端开发实用工具-Bower的使用。

    参看博客:[https://segmentfault.com/a/1190000002971135]