1. 首先, 指令后的引号内是可以写 js 表达式的, 这点很重要. v-if 的用法很简单, 只需要给 v-if = " " 的引号内放一个 布尔值 即可. 注意: v-if 的隐藏是不渲染这个 html 元素, 而非 display: none.

2. 但仅仅是上面这样还无法运行, 还得实例化一个 Vue 对象, 并把 "#app" 节点传进去, 下面是完整代码.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

<div id="app">

    <a href="#" v-if="false">Fly me to the Moon.</a>

    <script>

        var vApp = new Vue({

             el: "#app"

         })

     </script>

</div>

</body>

</html>

3. 之所以要像上面这样, 是因为 Vue 是通过 new Vue() 生成的实例对象来控制页面渲染的. 如果没有 Vue 实例对象, 或者, 实例对象内部不包含这个 id 为 app 的 html 元素, 则 Vue 的语法就会无效. 比如上面的 v-if

怎样使用 v-if 实现 html 元素的显示 / 隐藏?的更多相关文章

  1. Atitit.判断元素是否显示隐藏在父元素 overflow

    Atitit.判断元素是否显示隐藏在父元素 overflow 1.1. scrollTop  指的是元素的滚动条顶端距离原生基线的高度...1 1.2. 判断元素是否显示隐藏在父元素  $(next) ...

  2. Android中如何控制元素的显示隐藏？

    在Android程序中,有时需要程序开启时默认隐藏某个控件,当单击某个按钮时才触发显示控件的内容.比如在查询员工资料时,提交查询后再显示查询到的表格内容: Android中控制元素的隐藏参考以下代码. ...

  3. jQuery如何判断元素是否是隐藏的？

    jQuery函数简介: is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true. 如果没有元素符合,或者表达式无效,都返回'false'. 注 ...

  4. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  5. [CSS]元素的显示与隐藏

    摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...

  6. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  7. jQuery判断元素是否显示与隐藏

    jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏 核心代码 if($("#username").is(":hidd ...

  8. jq判断元素是否显示

    为了判断元素是否显示,jquery中用is()来实现, $(function(){ $(obj).bind('click',function(){ if(obj.is(:visible)){ //编写 ...

  9. 两个标签页定位第二个标签页元素时显示element not visible

    问题描述 web页面有两个标签页, 当转换到第二个标签页定位元素时, 显示element not visible. 代码 ... //省略 WebElement ele= browser.getEle ...

随机推荐

  1. java实现自定义同步组件的过程

    实现同步组件twinsLock:可以允许两个线程同时获取到锁,多出的其它线程将被阻塞. 以下是自定义的同步组件类,一般我们将自定义同步器Sync定义为同步组件TwinsLock的静态内部类. 实现同步 ...

  2. 2018全国大学信息安全竞赛wp(2misc+2crypto+1web)

    WEB: 0x00 easyweb admin用户是没有密码的,但是当密码为空时,网页会自动填写.用hackbar构造空密码post,服务器返回cookies,浏览器保存,刷新获得flag CRYPT ...

  3. 笔记一（固件、BIOS、UEFI）

    1.固件 固件一般是指保存在ROM中的程序和数据,通过固件操作系统按照标准的设备驱动实现特定机器的运行. 简单来讲,固件就是固化在ROM的软件,当然也可以通过特定的工具进行升级. MP3.MP4.手机 ...

  4. Flume-事务与传输流程

    一.Flume 事务 流程图 Put 事务流程 doPut:将批数据先写入临时缓冲区 putList doCommit:检查 channel 内存队列是否足够合并 doRollback:channel ...

  5. golang中mysql建立连接超时时间timeout 测试

    本文测试连接mysql的超时时间. 这里的"连接"是建立连接的意思. 连接mysql的超时时间是通过参数timeout设置的. 1.建立连接超时测试 下面例子中,设置连接超时时间为 ...

  6. 前端与后台可能需要使用交互的表单form，input标签

    前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...

  7. 'pybot.bat' 不是内部或外部命令,也不是可运行的程序

    在通过命令行工具 运行RobotFramework的文件, 会使用到pybot.bat. 在dos输入pybot提示'pybot' 不是内部或外部命令,也不是可运行的程序或批处理文件, 可以在pyth ...

  8. FastDFS 学习总结

    1.1   什么是FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用 ...

  9. 修改主机名(/etc/hostname和/etc/hosts区别)

    ubuntu永久修改主机名 1.查看主机名 在Ubuntu系统中,快速查看主机名有多种方法:其一,打开一个GNOME终端窗口,在命令提示符中可以看到主机名,主机名通常位于“@”符号后:其二,在终端窗口 ...

  10. 不同种类的PI膜及其特性

    一.PI膜种类及其特性 1.聚酰亚胺材料分类 聚酰亚胺材料可分为热塑性聚酰亚胺和热固性聚酰亚胺(包括双马来酰亚胺型和单体反应聚合型聚酰亚胺及各自改性产品)两大类 其中,热塑性聚酰亚胺材料一般采用两步法 ...