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. Eclipse打不开 提示an error has occurred.see the log file

    有时由于Eclipse卡死,强制关闭之后会出现打不开的情况.弹窗提示: 查看log文件,发现有这样的信息:  !MESSAGE The workspace exited with unsaved ch ...

  2. windows下mysql配置，my.ini配置文件

    基本配置,这个配置可以直接复制到mysql根目录下了my.ini文件中, [client] port=3306 [mysql] no-beep # default-character-set= [my ...

  3. <转载> 58到家数据库设计规范

    原文地址: http://mp.weixin.qq.com/s?__biz=MjM5ODYxMDA5OQ==&mid=2651959906&idx=1&sn=2cbdc66cf ...

  4. spring之mvc原理分析及简单模拟实现

    在之前的一篇博客中已经简单的实现了spring的IOC和DI功能,本文将在之前的基础上实现mvc功能. 一 什么是MVC MVC简单的说就是一种软件实现的设计模式,将整个系统进行分层,M(model ...

  5. 笔记五：python字符串

    一:学习内容 字符串类型 字符串类型判断 字符串类型互转 字符串小练习 二:字符串类型 1. basestring 在python中和字符串相关的数据类型为:str和unicode,他们都是bases ...

  6. Servlet多文件上传

    各位大侠可能会对263电子邮箱中的"上传附件"功能有印象,就是:在浏览 器中点击"浏览",弹出一个对话框,选中文件后,单击"确定",文件就被 ...

  7. 使用CSS进行定位

    CSS中通过使用position属性,有4种不同类型的定位方式,这会影响元素框生成的方式. position属性值的含义: static:静态定位 元素框正常生成.块级元素生成一个矩形框,作为文档流的 ...

  8. c#Image.FromFile图形加载异常处理

    public void UpdateImg(string picpath) { //更新至控件中 PnlImageShow.BackgroundImage = LoadImgPath(picpath) ...

  9. SpringMVC整合Shiro安全框架（一）

    一. 准备工作 1. 本文参考自张开涛的 <跟我学Shiro> 二. 简介 1. Apache Shiro是Java的一个安全框架.可以帮助我们完成:认证.授权.加密.会话管理.与Web集 ...

  10. Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...