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. Android webView加载图片显示过大的问题

    webview的基本使用流程这里我就不重复说明了,本篇针对的是文章详情加载完成后出现的情况,这里我们使用的方法是:通过js脚本,重置img标签中图片的宽度和高度. 使用步骤: 1.此方法需要使用js, ...

  2. Linux设备驱动程序 之 完成量

    内核编程中常见的一种模式是,在当前线程之外初始化某个活动,然后等待该活动的结束:这个活动可能是,创建一个新的内核线程或者新的用户空间进程.对一个已有进程的某个请求,或者某种类型的硬件动作等: 内核提供 ...

  3. Linux Centos安装宝塔面板教程

    材料:阿里云服务器远程ip地址和购买服务的账号和密码 版本Centos 6.9版本 用Xshell远程登录安装宝塔 Xshell的界面是这样的,如图 点击左上角新建回话可以创建一个新的SSH连接,如图 ...

  4. lavarel数据库查找别名操作

    lavarel数据库查找别名操作 一.总结 一句话总结: 当有表前缀的时候:DB::table('users as table1')->select(DB::raw('table1.id'))- ...

  5. useMemo、useCallback简单理解

    1.useMemo.useCallback都是使参数(函数)不会因为其他不想关的参数变化而重新渲染. (1)useMemo const memoDom = useMemo(() => { ret ...

  6. Python——私有化 和 属性property

    Python——私有化 和 属性property 一.私有化 xx: 公有变量 _x: 单前置下划线,私有化属性或方法,from somemodule import *禁止导入,类对象和子类可以访问 ...

  7. easyUI之Tree（树）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. 基于SAR对Linux资源的监控shell脚本

    #! /bin/bash ] # $# 传递给脚本或函数的参数个数 then 脚本名称 exit -; fi SLEEP_TIME=$ LOG=$ while true do #线程数 thread_ ...

  9. SEO中常用的301永久重定向代码大全

    301是永久重定向的意思,表示请求的网页已永久移动到新位置,服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置.其实301重定向在SEO中被广泛应用,也是被广泛认为比 ...

  10. mysql 截取字符函数substring(param1,param2,param3) 的用法

    substring(paramter1,paramter2,paramter3) 截取字段长度 paramter1  被截取的字段paramter2 从第几位开始截取,负数表示从末尾开始数,的位数开始 ...