---恢复内容开始---

首先,在跟着api做的时候,要把v-if包裹在Vue对应的el里面,重要的事情说三遍。

html:

<div id="vif">
<div v-if="Math.random() > 0.1">
Now you see me
</div>
<div v-else>
Now you don't
</div>
</div>

js:

var app13=new Vue({
el:'#vif'
});

这样才能显示其中一个标签的内容。(v-else必须紧挨着v-if)

v-show与v-if 的区别在于v-show所对应的元素会一直被渲染出来,v-show所做的只是切换该元素的css属性。v-if值如果是false,则该元素不会出现在DOM中

---恢复内容结束---

Vue.js之v-if的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. Vue.js学习笔记(1)

    数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时

  3. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  4. Vue.js的入门

    介绍 vue.js 是一个客户端js库,可以用来开发单页应用.为了一个项目的选型,我前前后后的看了angular.react.vuejs ,对前两者是佩服,对后者是爱.因为它简洁干净利索,并且还有高大 ...

  5. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

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

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

  7. 一份不错的vue.js基础笔记!!!!

    第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

  8. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  9. Vue.js常见问题

    1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...

  10. vue.js+boostrap

    vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...

随机推荐

  1. iOS 学习 - 24 全局跑马灯,支持后台回到前台

    思路: 1.创建一个单例 + (instancetype)shareManager { static CCPaomaView *pModel = nil; static dispatch_once_t ...

  2. IE10 和 Chrome50 对日期 new Date() 支持的区别

    IE10 和 Chrome50 对日期 new Date() 支持的区别: new Date('2016-06-18'); // IE10 不通过.Chrome 通过 new Date('2016/0 ...

  3. crontab不执行perl脚本分析

    在新装的Linux服务器上部署了一个作业监控磁盘空间并提前告警,在shell脚本里面调用了一个perl脚本发送告警邮件.结果出现了一个很奇怪的现象:如果手工执行该脚本/home/oracle/scri ...

  4. SQL SERVER特殊行转列案列一则

    今天有个同事找我,他说他有个需求,需要进行行转列,但是又跟一般的行转列有些区别,具体需求如下所说,需要将表1的数据转换为表2的显示格式. 我想了一下,给出了一个解决方法,具体如下所示(先给出测试数据) ...

  5. 大型web系统数据缓存设计

    1. 前言 在高访问量的web系统中,缓存几乎是离不开的:但是一个适当.高效的缓存方案设计却并不容易:所以接下来将讨论一下应用系统缓存的设计方面应该注意哪些东西,包括缓存的选型.常见缓存系统的特点和数 ...

  6. 烂泥:Postfix邮件服务器搭建之准备工作

    说实话,Postfix邮件服务器的搭建是一件很麻烦的事情,需要各种软件之间的配置和调试.在写这篇文章之前,我也是搭建测试了不下于10次才算把整个流程给走通,今天刚好有时间把整个搭建过程记录下来. 在正 ...

  7. 萌新笔记——C++里将string类字符串(utf-8编码)分解成单个字(可中英混输)

    最近在建词典,使用Trie字典树,需要把字符串分解成单个字.由于传入的字符串中可能包含中文或者英文,它们的字节数并不相同.一开始天真地认为中文就是两个字节,于是很happy地直接判断当前位置的字符的A ...

  8. Docker 1.12 集群

        环境介绍 虚拟机两台,vmware ,网络为NAT node139:192.168.190.139 Node140: 192.168.190.140     设置hostname 以139为例 ...

  9. Consul Windows 安装

    下载文件https://www.consul.io/downloads.html, 解压完毕后只有一个consul文件 consul 启动一个 Agent consul agent -server - ...

  10. monkeyrunner 自动化测试 图片对比的实现

    这个功能在网上看了好多人的代码,但是总是在image.writeToFile('D:/tmp/images/black.png','png')这一句出错.查了google的API也感觉没错呀. 后来自 ...