v-show的功能和v-if基本一样,但是v-if有衍生的v-else-if和v-else,v-show没有

v-show的性能比v-if要好,能用v-show就不要用v-if

v-if是删除dom节点

v-show是不删除dom节点,增加行级样式'display:none'

代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js v-show的使用 </title>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <h1 v-if="status">简单记录</h1>

    <h2 v-show="status">hello</h2>

    <input type="checkbox" v-model="status">

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        data:{

            status:true

        },

    });

</script>

</body>

</html>

vue v-show的使用的更多相关文章

  1. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  2. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  3. Vue.js的从入门到放弃进击录（二）

    哇塞,昨晚更新的篇(一)这么多阅读量,看来入坑的人越来越多啦~熬了一个礼拜夜,今天终于生病惹~国庆要肥家咯·所以把篇(二)也更完.希望各位入坑的小伙伴能少跳几个坑呗.如果有什么不对的地方也欢迎讨论指正 ...

  4. vue初级学习--环境搭建

    一.导语 最近总想学点东西,es6啊.typescript啊,都想学,刚好有个机遇,可以学点vue,嗯,那就开始吧. 二.正文 1.node环境: 下载安装nodeJs,最好是1.6以上的版本,下载地 ...

  5. 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  6. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  7. 怎么看vue版本

    查看vue版本号是 vue -V 而不是npm vue -v ,npm vue -v 等同于npm -v vue -V: 后面那个V是大写的.

  8. vue不是内部或外部命令，配置一个Path系统变量就可以解决

    作为一个vue小白,最近为vue安装真是操碎了心.无论怎么查找网上的教程,还是解决不了"vue不是内部或外部的命令"诸如此类的问题.好在功夫不负有心人,终于在多次的试验下,成功解决 ...

  9. 如何用vue实现树形菜单？

    在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个.由于都不是很熟,就挑了第一个.本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自 ...

  10. vue初学者

    先分享一波福利 vue学习视频    链接:https://pan.baidu.com/s/1ggSfE75 密码:7h2a        1.先安装 webpack vue-cli          ...

随机推荐

  1. 第05组 Beta冲刺（2/4）

    第05组 Beta冲刺(2/4) 队名:天码行空 组长博客连接 作业博客连接 团队燃尽图(共享): GitHub当日代码/文档签入记录展示(共享): 组员情况: 组员1:卢欢(组长) 过去两天完成了哪 ...

  2. CF1253F Cheap Robot（神奇思路，图论，最短路，最小生成树/Kruskal 重构树/并查集）

    神仙题. 先考虑平方级别的暴力怎么做. 明显答案有单调性,先二分 \(c\). 先最短路预处理 \(dis_u\) 表示 \(u\) 到离它最近的充电站的距离(一开始把 \(1\) 到 \(k\) 全 ...

  3. 关于Unity中AI随机巡逻障碍物预判与快速运动时物理穿透的思考

    如果不想用Unity的导航系统,很多时候就要解决如何预判前进路径中的障碍物问题,之前也看过一些非常经典的寻路算法例如AStar寻路,虽然也可实现功能,但总感觉有些小题大做.寻路算法大多数都是为了得出最 ...

  4. 【文本处理命令】之sed命令详解

    sed行处理命令详解 一.简介 sed命令是一种在线编辑器.一个面向字符流的非交互式编辑器,也就是说sed不允许用户与它进行交互操作.sed是按行来处理文本内容的,它一次处理一行内容.处理时,把当前处 ...

  5. Distilling the Knowledge in a Neural Network

    url: https://arxiv.org/abs/1503.02531 year: NIPS 2014   简介 将大模型的泛化能力转移到小模型的一种显而易见的方法是使用由大模型产生的类概率作 ...

  6. vue记事2

    1.vue2父子组件双向数据传递 https://segmentfault.com/a/1190000011783590 2.vue父组件通过props向子组件传递方法的方式 https://segm ...

  7. Leakcanary原理浅析

    LeakCanary是Android内存泄漏的框架,作为一个"面试常见问题",它一定有值得学习的地方,今天我们就讲一下它.作为一名开发,我觉得给人讲框架或者库的原理,最好先把大概思 ...

  8. 【干货】SqlServer 总结几种存储过程分页的使用

    就我而言写代码最烦的就是处理数据,其中之一就是分页的使用. 有的代码写多了,总结出一套适用自己的分页方法:有的查一下资料借鉴一下套用起来也达到目的. 那么小编在这里给大家总结几个方法供大家做一下参考. ...

  9. String trim() ,去除当前字符串两边的空白字符

    package seday01;/** * String trim() * 去除当前字符串两边的空白字符 * @author xingsir */public class TrimDemo { pub ...

  10. 上传App Store 被拒问题及解决方案总结

    最近公司比较忙,一直忙着写代码做新的应用,一连上线了几个应用,我们也是忙得焦头烂额的,都没时间做总结,今天趁APP审核期间,总结一下近期上传App Store遇到的一些问题和解决方法,以便以后查阅. ...