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. mac使用jadx逆向app

    安装jadx 编译安装 git clone https://github.com/skylot/jadx.git cd jadx ./gradlew dist 然后将build/jadx/bin加入到 ...

  2. mysql 查询相关命令

    1. 结果集按列展示 mysql  -u用户名  -p密码  -D 数据库名 -e  sql语句 示例:mysql   -uroot  -p123456  -D mysql -e select * f ...

  3. fastadmin编辑内容，有下拉选择关联的内容，自定义的参数去获取相应的下拉内容

    1.可以到你的编辑页面中添加自定义条件 data-params='{"custom[shop_id]":"2"}'

  4. js怎么动态加载js文件（JavaScript性能优化篇）

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...

  5. ThinkPHP空操作与命名空间

    命名空间:相当于一个虚拟的目录 正常管理文件使用文件夹--物理区分 TP框架的初始命名空间是:ThinkPHP\Library 在TP框架下命名空间里面使用\代表的是初始命名空间(ThinkPHP\L ...

  6. JAVA类定义的修饰

    命名类的访问权限public.protected.friendly,private 这四个的权限, 作用域: 当前(父,超)类: 同一Package: 派生(子)类: 其他Package: publi ...

  7. APScheduler 3.0.1浅析

    简介 APScheduler是一个小巧而强大的Python类库,通过它你可以实现类似Unix系统cronjob类似的定时任务系统.使用之余,阅读一下源码,一方面有助于更好的使用它,另一方面,个人认为a ...

  8. 齐普夫-Zipf定律

    python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&ut ...

  9. LC 351. Android Unlock Patterns

    Given an Android 3x3 key lock screen and two integers m and n, where 1 ≤ m ≤ n ≤ 9, count the total ...

  10. VBA ListView控件使用实例

    功能:ListView控件实现连接数据库实现显示查询数据空能. 图片: 代码: Private Sub CommandButton1_Click() Dim res As String res = T ...