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. python列表元素的基本操作

    1.列表元素的增加 python提供三种方法增加元素,append,extend,insert. 区别:例  list3=[1,10,100,1000,10000] A.   list3.append ...

  2. asp.net Core3.1自定义权限体系-菜单和操作按钮权限

    我们在做项目项目,经常会碰到权限体系,权限体系属于系统架构的一个最底层的功能,也是非常重要的功能,几乎在每个项目都会用到.那么我们该如何设计一个比较合理的且扩展性较强的权限体系呢? 经过多天的摸索,参 ...

  3. mysql中的函数总结

    mysql中常用日期时间函数 MySQL服务器中的三种时区设置: ①系统时区---保存在系统变量system_time_zone ②服务器时区---保存在全局系统变量global.time_zone ...

  4. python接口测试自动化之python基础语法

    一.pycharm的使用和python基本语法 (一).pycharm的使用和python环境 1.python以及pycharm的安装 python 的版本选择:3.x 版本,不要安装2.x 版本, ...

  5. el-table表头v-for循环遇到的问题

    这两天在项目中遇到了el-table表头需要动态变化,也就是点击不同的标签显示对应的表格,主要表头都不一样,那么表格也就是动态的,表头也需要循环 一开始以为很简单 <el-table       ...

  6. Android开发之设置应用设置全屏的两种解决方法 兼容android5.0等两种解决方法

    在开发中我们经常需要把我们的应用设置为全屏,有两种方法,一中是在代码中设置,另一种方法是在配置文件里改! 一.在代码中设置:  代码如下: package com.android.tutor; imp ...

  7. Linux下命令设置别名--alias（同实用于mac）

    最近在搞appium自动化脚本编写,过程中经常会使用 uiautomatorviewer这个工具查看UI布局和元素,但是不得不说这个单词太长了.. 如何快速使用,有三个小技巧,分别是: 1.设置好改工 ...

  8. 2019HNCPC C Distinct Substrings 后缀自动机

    题意 给定一个长度为n字符串,字符集大小为m(1<=n,m<=1e6),求\(\bigoplus_{c = 1}^{m}\left(h(c) \cdot 3^c \bmod (10^9+7 ...

  9. 1.异常页面: /File/ApplyFileForm.aspx 2.异常信息: 基类包括字段“PageOfficeCtrl1”，但其类型(PageOffice.PageOfficeCtrl)与控件(PageOffice.PageOfficeCtrl)的类型不兼容。

    出现页面报错的解决如下: 1.  在  .aspx  页面报错的字段  ID 名称更改: 2.  在没有重复 ID控件,先实行步骤1, 生成项目是ok的,然后,还原,原来的ID名称,再去浏览页面运行, ...

  10. 小程序开发-使用npm包

    微信小程序引用npm包 微信小程序官方支持使用npm包,地址为 https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html 实 ...