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

1.使用

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <script src="http://unpkg.com/vue/dist/vue.js"></script>
  7.  
  8.     <script type="text/javascript">
  9.         window.onload = function(){
  10.             var vm = new Vue({
  11.                 el:'#box',
  12.                 data:{
  13.                     isShow:false,
  14.                 },
  15.                 methods:{
  16.                     toggle:function(){
  17.                         this.isShow = !this.isShow;
  18.                     }
  19.                 }
  20.             });
  21.         }
  22.     </script>
  23. </head>
  24. <body>
  25.     <div id="box">
  26.         <input type="button" value="toggle" v-on:click="toggle()"> <br />
  27.         <div v-show="isShow" style="width: 100px;height: 100px;background: red"></div>
  28.     </div>
  29. </body>
  30. </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. IntelliJ IDEA使用心得之快捷键篇

    关于IDEA快捷键的文章有很多,因此,我只对经常使用快捷键进行介绍. 因为我的第一款IDE是eclipse,因此我是根据eclipse的快捷键习惯来重置IDEA的快捷键. 点击进入IDE设置界面:

  2. 自定义针对Product Key处理的TextBox

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  3. jQuery操纵cookie(原生javascript处理cookie)

    jQuery也是可以操作cookie的 1.首先下载jQuery.js 以及 jquery.cookie.js 这两个文件 2.安装(其实就是引用) <html>       <he ...

  4. java 基本理论知识点

    通过JAVAOO 的笔试后,总结了一些理论的知识点. 1.main方法是怎么写的 public static void main(String [] args){}//最习惯的 public stat ...

  5. redis集群与分片（2）-Redis Cluster集群的搭建与实践

    Redis Cluster集群 一.redis-cluster设计 Redis集群搭建的方式有多种,例如使用zookeeper等,但从redis 3.0之后版本支持redis-cluster集群,Re ...

  6. [转]HTTP请求中的form data和request payload的区别

    本文转自:http://www.cnblogs.com/btgyoyo/p/6141480.html jQuery的ajax方法和post方法分别发送请求,在后台Servlet进行处理时结果是不一样的 ...

  7. SVN版本控制——SVN 合并的六种方式

    合并的工作是把主干或者分支上合并范围内的所有改动列出,并对比当前工作副本的内容,由合并者手工修改冲突,然后提交到服务器的相应目录里.如果当前工作副本是主干,则合并的范围是分支上的改动,如果工作副本是分 ...

  8. automapper 自动映射 集成asp.net Core2.1

    学习博文:https://www.cnblogs.com/yan7/p/8085410.html 1.使用nuget 安装 <PackageReference Include="Aut ...

  9. 【模板】埃拉托色尼筛法 && 欧拉筛法 && 积性函数

    埃拉托色尼筛法 朴素算法 1 vis[1]=1; 2 for (int i=2;i<=n;i++) 3 if (!vis[i]) 4 { 5 pri[++tot]=i; 6 for (int j ...

  10. [android] 手机卫士黑名单功能（列表展示）

    先把要拦截的电话号码保存到数据库中,拦截模式用个字段区分,1 电话拦截,2 短信拦截,3全部拦截 新建Activity类CallSmsSafeActivity.java 新建布局文件activity_ ...