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. python练习-(秒转时分秒，时分秒转秒)-对比linux中文件的上次更改时间跟当前时间相差多久。

    具体代码如下> import paramiko,re,datetime,time ssh=paramiko.SSHClient() ssh.set_missing_host_key_policy ...

  2. Win10+VS2017配置pthread

    0.pthread源码下载:https://sourceware.org/pthreads-win32/ 1.下载pthreads-w32-2-9-1-release.zip完毕后,解压,内容如下 其 ...

  3. 提高 python 效率的一些细节方式

    在列表里面计数 性能:第二种计数方法比第一种快6290倍,为啥因为Python原生的内置函数都是优化过的,所以能用原生的计算的时候,尽量用原生的函数来计算. 过滤一个列表 性能:第二种方法比第一种慢近 ...

  4. springmvc集成swagger

    1.保证项目为maven项目 2.导入jar包依赖 <dependency> <groupId>io.springfox</groupId> <artifac ...

  5. mysql8修改密码问题

    查看初始密码: grep "temporary password" /var/log/mysqld.log 查看validate_password变量 SHOW VARIABLES ...

  6. Linux学习—rpm包管理

    前言 在linux上,一个软件通常由二进制程序,库文件,配置文件和帮助文件组成.其中: 二进制程序一般都放在/bin,/sbin,/usr/bin,/usr/sbin,/usr/local/bin和/ ...

  7. C# AES的128位、192位、256位加密

    C# AES的128位.192位.256位加密   AES加密原理,这里就不解释了,自行百度.这里主要细说AES的CBC加密模式下的128位.192位.256位加密区别,参考 对称加密和分组加密中的四 ...

  8. 记一次排查mysql数据库连接未关闭问题的过程

    在一些项目中由于一些特殊原因仍然保留着显示的获取数据库连接(Connection).提交事务.回滚事务.关闭连接等操作:其中关闭连接是比较容易疏忽又比较难在前期发现的问题. 我是如何排查连接未关闭的问 ...

  9. centos6.5 单点kafka测试

    一,kafka解压到/usr/local/下后,修改配置文件 vim config/zookeeper.properties 修改如下几行: dataDir=/usr/local/zookeeper/ ...

  10. ubuntu14.04 安装 zoom.us

    https://support.zoom.us/hc/en-us/articles/204206269-Getting-Started-on-Linux http://askubuntu.com/qu ...