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. APEX安装

    git clone https://github.com/NVIDIA/apex.gitcd apex export CUDA_HOME=/usr/local/cudapip3 install -v ...

  2. 《Head First 设计模式》：外观模式

    正文 一.定义 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用. 要点: 外观模式将一个或数个类的复杂的一切都隐藏在背后,只显露出一个干净美好的外 ...

  3. C# Mongo DB 修改多层嵌套集合中的字段

    C# Mongo DB 修改嵌套集合中的字段 虽然c#的mongo 驱动很强大,而且还支持linq,但是一些复杂的操作语句还是比较困难 这里我用Bson实现功能 这是模型(我这里有多层嵌套) publ ...

  4. idea,git操作

    原文地址:https://blog.csdn.net/lzx2018/article/details/91414591 1新建分支 点击New Branch 2切换分支

  5. 写Seo网站标题应该注意什么

    http://www.wocaoseo.com/thread-11-1-1.html 最近看了群里一些朋友讨论关于网站优化标题应该注意哪些?各种说法五花八门,好的seo优化标题是可以给网站带来不错的流 ...

  6. [ASP.NET Core开发实战]基础篇03 中间件

    什么是中间件 中间件是一种装配到应用管道,以处理请求和响应的组件.每个中间件: 选择是否将请求传递到管道中的下一个中间件. 可在管道中的下一个中间件前后执行. ASP.NET Core请求管道包含一系 ...

  7. 攻防世界——Misc新手练习区解题总结<2>（5-8题）

    第五题gif: 下载附件后,解压得到这样一个文件 几经寻找无果后,发现是不是可以将gif中的黑白图片看做二进制的数字,进而进行解密 最后用二进制转文本得到flag 第六题掀桌子: 看起来是16进制的密 ...

  8. MySQL数据库中几种数据类型的长度

    在MySQL里新建表自然会涉及设置字段长度,但有时会发现长度限制在一些字段类型中不起作用?字段长度是按字节算还是字符算? 如图中:int看起来只要还在本身类型取值范围内就行,字段长度没有起到作用:而c ...

  9. SpringBoot 拦截器获取http请求参数

    SpringBoot 拦截器获取http请求参数-- 所有骚操作基础 目录 SpringBoot 拦截器获取http请求参数-- 所有骚操作基础 获取http请求参数是一种刚需 定义拦截器获取请求 为 ...

  10. Oracle12C创建视图权限不足

    授权: GRANT CREATE VIEW TO c##scott; 作者:彼岸舞 时间:2020\06\23 内容关于:Oracle 本文属于作者原创,未经允许,禁止转发