1. v-if 实现了真正的 条件渲染, 条件为真时, 节点被创建, 相应的监听函数也会生效, 条件为假时, 节点被销毁, 触发事件监听函数不会生效. 而 v-show 只是使用了 display:none , 其元素节点始终在 dom 树中, 不会被销毁和重建. 如下所示, 按钮 A 使用了 v-if , 点击以后 dom 树中的相应节点会被创建或销毁, 而 按钮 B 使用了 v-show , 它的所控制的 html 元素始终在 dom 树中, 不会被销毁.

<!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">

        <input type="button" value="A" v-on:click="clickA" />

        <p v-if="a">{{ a }}</p>

        <input type="button" value="B" v-on:click="clickB" />

        <p v-show="b">{{ b }}</p>

    </div>

    <script>

        var vApp = new Vue({

                el: "#app",

                data: {

                    a: true,

                    b: true

                },

                methods: {

                    // 点击相应的按钮, 改变a, b的值, 观察v-if 和 v-show的区别.

                    clickA: function () { this.$data.a = !this.$data.a },

                    clickB: function () { this.$data.b = !this.$data.b },

                }

            });

    </script>

</body>

</html>

2. 我们观察一下他们在浏览器中的执行情况, 在不点击时, 两个 p 标签 都是正常显示的; 两个都点击后, 在页面上就消失了, 不过使用了 v-if 的标签消失得更"彻底". 使用了 v-show 的标签仍在, 但会多一个属性: style="display: none".

    

怎样理解 Vue 中的 v-if 和 v-show ?的更多相关文章

  1. 理解vue中的scope的使用

    理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...

  2. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  3. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  4. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  5. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  6. 深入理解vue中的slot与slot-scope

    from:https://segmentfault.com/a/1190000012996217?utm_source=tag-newest 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练 ...

  7. 深刻理解Vue中的组件

    转载:https://segmentfault.com/a/1190000010527064 --20更新: Vue2.6已经更新了关于内容插槽和作用域插槽的API和用法,为了不误导大家,我把插槽的内 ...

  8. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  9. 深入理解 vue 中 scoped 样式作用域的规则

    哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...

随机推荐

  1. 2018-2019-2 20165330《网络对抗技术》Exp7 网络欺诈防范

    目录 基础问题 相关知识 实验目的 实验内容 实验步骤 实验中遇到的问题 实验总结与体会 实验目的 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 返回目录 实验内容 简 ...

  2. QObject 的拷贝构造和赋值操作

    QOject 中没有提供一个拷贝构造函数和赋值操作符给外界使用,其实拷贝构造和赋值的操作都是已经声明了的,但是它们被使用了Q_DISABLE_COPY () 宏放在了private区域.因此所有继承自 ...

  3. CentOS 7服务器下Nginx安装配置

    一.安装编译工具及库文件 $ yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pc ...

  4. Android跨进程通信Messenger

    一.概述 我们可以在客户端发送一个Message给服务端,在服务端的handler中会接收到客户端的消息,然后进行对应的处理,处理完成后,再将结果等数据封装成Message,发送给客户端,客户端的ha ...

  5. Android解决AVD Hardware Buttons 和DPAD无法使用问题

    如图所示按键用鼠标点击时无法响应. 解决方案: 以我创建的AVD名为Tablet为例 1.找到用户目录(我的用户目录yummy),然后进入如下目录 mac: ~/yummy/.android/avd/ ...

  6. SQL：百科

    ylbtech-SQL:百科 结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理 ...

  7. Android中常见的默认实现类

    * Basexxx* Defaultxxx* Simplexxx* Baicxxx

  8. PHP批量写入数据、批量删除数据

    批量插入可以参考$sql = "insert into data (id,ip,data)  values ";for($i=0;$i<100;$i++){$sqls[]=& ...

  9. 执行scripts/mysql_install_db --user=mysql --basedir=/usr/local/mysql --datadir=/data/mysqldb命令时一直报错：

    Can't locate Data/Dumper.pm in @INC (@INC contains: /usr/local/lib64/perl5 /usr/local/share/perl5 /u ...

  10. c99数组稀疏初始化

    #include <stdio.h> #include <stdlib.h> int main() { ] = {[]=,,[] =}; ; i < ; i++) { p ...