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. OUC_Summer Training_ DIV2_#13 723afternoon

    A - Shaass and Oskols Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I ...

  2. python 字符串（str）和列表（list）的互相转换

    1.str to list  str1 = "12345"list1 = list(str1)print list1 str2 = "123 sjhid dhi" ...

  3. Linux系统是否被植入木马的排查流程梳理

    在日常繁琐的运维工作中,对linux服务器进行安全检查是一个非常重要的环节.今天,分享一下如何检查linux系统是否遭受了入侵? 一.是否入侵检查 1)检查系统日志 1 2 检查系统错误登陆日志,统计 ...

  4. linux设备树中如何删除某个节点？

    答:使用以下语法即可删除某节点: /delete-node/ 节点名;

  5. hibernate对连接池的支持

    连接池, 作用: 管理连接:提升连接的利用效率! 常用的连接池: C3P0连接池   Hibernate 自带的也有一个连接池,且对C3P0连接池也有支持!   Hbm 自带连接池:          ...

  6. SoundPool 播放短声音

    SoundPool 最大只能申请1M的内存空间,只能用一些很短的声音片段,而不是用它来播放歌曲或者做游戏背景音乐. 使用 SoundPool 播放短声音实现步骤如下: // 创建SoundPool实例 ...

  7. HelloWorld入门代码

    A:定义类 B:写main方法 C:写输出语句 D:Java程序开发运行与工作原理 E:编译和运行程序 class HelloWorld { public static void main(Strin ...

  8. Jmeter配置联机负载生成密钥失败的问题解决

    在配置负载联机时, 控制机上需要生成密钥供负载机使用. 在bin目录下双击create-rmi-keystore.bat时, 弹出错误提示: 'XXXX'不是内部或外部命令, 这种典型的错误一看就环境 ...

  9. linux 执行shell脚本的时候，生成的log文件乱码

    脚本执行后,生成的log文件,cat打开没有问题,vim打开就是文字乱码. file1完全没有问题,其他人的file2追加到file中间的时候就出现了这个问题. 因为使用notepad在win7写的, ...

  10. [Kerberos] Kerberos教程（一）

    1 简介 Kerberos协议旨在通过开放和不安全的网络提供可靠的身份验证,其中可能拦截属于它的主机之间的通信.但是,应该知道,如果使用的计算机容易受到攻击,Kerberos不提供任何保证:身份验证服 ...