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. linux如何将某个用户加入到其它组?

    答: 在Ubuntu下可以使用以下命令添加: sudo usermod -a -G <group_name> <user_name> 注意: 如何生效呢?   需要重新登陆系统 ...

  2. 微信一键登录（微信OAuth2.0）

    1.注册微信开放平台https://open.weixin.qq.com,一定要清楚微信开放平台和微信公众平台是分别独立的,不能共用. 2.登录进入——管理中心,网站应用,创建网站应用.填写申请,企业 ...

  3. 把文档中的数据取出并插入到excel中

    from xlrd import open_workbookfrom xlutils.copy import copy jsonfile=r'C:\Users\Administrator\Deskto ...

  4. C语言中函数strcpy ,strncpy ,strlcpy的用法

    strcpy ,strncpy ,strlcpy的用法 好多人已经知道利用strncpy替代strcpy来防止缓冲区越界. 但是如果还要考虑运行效率的话,也许strlcpy是一个更好的方式. 1. s ...

  5. 安装mysql报Requires: libc.so.6(GLIBC_2.17)(64bit)

    Error: Package: mysql-community-server-5.6.40-2.el7.x86_64 (mysql56-community) Requires: libc.so.6(G ...

  6. 转载:深入理解Spring MVC 思想

    原文作者:赵磊 原文地址:http://elf8848.iteye.com/blog/875830 目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.sp ...

  7. React Native细节知识点总结<一>

    1.propTypes: static propTypes = { name:PropTypes.string, ID:PropTypes.number.isRequired, } 'isRequir ...

  8. UIView和UIWindow的使用

    1.创建窗口: func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [N ...

  9. Trie代码学习

    感觉不把这个Trie理解一下,AC自动机的代码看起来有点费劲. 这里代码的学习仿照训练指南209页. 这里如果只是查询单词,感觉用map更好,但是如果查前缀,还是用Trie. 1.Trie查询前缀字符 ...

  10. 三、使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...