vue学习06 v-show指令

v-show指令是：根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏

指令后面的内容，最终都会解析为布尔值（true和false）

练习代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h5>显示图片v-show</h5>

    <!-- 2.html的结构 -->

    <div id="app">

        <input type="button" value="切换显示状态" @click="changeIsShow">

        <input type="button" value="累计年龄" @click="addAge"><br>

        <img v-show="isShow" src="data:images/猫和老鼠.gif" alt="">

        <img v-show="age>=19" src="data:images/猫和老鼠.gif" alt="">

    </div>

    <!-- 1.开发环境版本 -->

    <script src="js/vue.js"> </script>

    <!-- 3.创建vue实例 -->

    <script>

       var app = new Vue({

           el:"#app",

           data: {

               isShow:false,

               age:18

           },

           methods:{

               changeIsShow: function(){

                   this.isShow = !this.isShow;

               },

               addAge:function(){

                   this.age++;

               }

           },

       })

    </script>

</body>

</html>

运行效果：

vue学习06 v-show指令的更多相关文章

  1. Vue学习之路5-v-model指令

    1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...

  2. Vue学习之路4-v-bind指令

    1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v- ...

  3. Vue学习系列(三)——基本指令

    前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...

  4. vue学习-day02（自定义指令，生命周期）

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  5. Vue学习之路8-v-on指令学习简单事件绑定之属性

    前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...

  6. Vue学习之路7-v-on指令学习之简单事件绑定

    前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...

  7. Vue学习五：v-for指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...

  8. Vue学习二：v-model指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...

  9. vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点

    需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...

随机推荐

  1. Java面试题（网络篇）

    网络 79.http 响应码 301 和 302 代表的是什么?有什么区别? 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移. 区别: 301 redirect: 301 代表永 ...

  2. Serializers组件详解

    Serializers组件 使用背景 因为每个语言都有自己的数据类型,不同语言要想数据传输,就必须指定一种各种语言通用的数据类型,如json,xml等等 序列化器允许把像查询集和模型实例这样的复杂数据 ...

  3. 微信小程序|小游戏

    [官]小游戏开发 https://developers.weixin.qq.com/minigame/dev/index.html 官网 https://mp.weixin.qq.com 做了4个微信 ...

  4. render 强大的渲染函数

    可以动态的创建节点 可以改变表格中要去换一种形式去展示的列 (未完暂定)

  5. HTTPS的简介

    一.什么是HTTPS HTTPS是在HTTP上建立SSL加密层,并对传输数据进行加密,是HTTP协议的安全版.现在它被广泛用于万维网上安全敏感的通讯,例如交易支付方面. HTTPS主要作用是: (1) ...

  6. The Unique MST(最小生成树的唯一性判断)

    Given a connected undirected graph, tell if its minimum spanning tree is unique. Definition 1 (Spann ...

  7. Monkey and Banana（dp，求最长的下降子序列）

    A group of researchers are designing an experiment to test the IQ of a monkey. They will hang a bana ...

  8. [BUUOJ记录] [CISCN 2019 初赛]Love Math & [NESTCTF 2019]Love Math 2

    主要考察利用已有函数构造危险函数绕过,实现RCE. 进入题目给出源码: <?php error_reporting(0); //听说你很喜欢数学,不知道你是否爱它胜过爱flag if(!isse ...

  9. Robot Framework自动化测试框架核心指南-如何做好自动化测试平台框架的设计

    自动化测试如果需要能高效快速的支撑软件项目的测试,项目的快速迭代以及上线,除了以上我们介绍的需要许多的Lib来支持以及需要高效的去编写自动化测试案例外,还需要一个好的自动化测试框架平台来支撑我们的自动 ...

  10. .NET实现可交互的WINDOWS服务(转载自CSDN"烈火蜓蜻")

    Windows 服务应用程序在不同于登录用户的交互区域的窗口区域中运行.窗口区域是包含剪贴板.一组全局原子和一组桌面对象的安全对象.由于 Windows 服务的区域不是交互区域,因此 Windows ...