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

首先,在跟着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. App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file

    ios进行http请求,会出现这个问题: App Transport Security has blocked a cleartext HTTP (http://) resource load sin ...

  2. 蚂蚁金服寒泉子:JVM源码分析之临门一脚的OutOfMemoryError完全解读

    ➠更多技术干货请戳:听云博客 概述 OutOfMemoryError,说的是java.lang.OutOfMemoryError,是JDK里自带的异常,顾名思义,说的就是内存溢出,当我们的系统内存严重 ...

  3. android 动画效果

    动画资源 一.分类: (一).概要:         3.0以前,android支持两种动画模式,补间动画(tween animation),帧动画(frame animation),在android ...

  4. 获取本机IP地址

    这里有两种方法: //获取本机IP - (NSString *)localIPAddress { NSString *localIP = nil; struct ifaddrs *addrs; ) { ...

  5. IOS开发之Bug--使用KVC的易错情况

    1.其实某些角度而言KVC是一个破坏封装又暴力的做法,而我已经两次因为KVC而导致应用程序出现闪退的情况. 场景:1.使用KVC修改某一个UIView的属性,比如width.    2.在viewWi ...

  6. SQL Server 2012 安装图解教程

    在安装微软最新数据库SQL Server 2012之前,编者先确定一下安装环境:Windonws 7 SP1,32位操作系统.CPU是2.1GHz赛扬双核T3500,内存2.93GB 安装SQL Se ...

  7. ORA-00600: internal error code, arguments: [17281], [1001], [0x1FF863EE8], [], [], [], [], []

    我们生产服务器中的一个数据库发出监控告警日志的邮件,内容如下所示,在31号09:11分出现了大名鼎鼎的ORA-00600错误. Dear All: The Instance xxx' alert lo ...

  8. 查看Linux版本信息

    如何查看Linux系统使用的版本信息呢? 下面这篇文章收集.整理了一些常见的查看Linux系统版本的方法.由于手头只有Oracle Linux.Centos Linux.Redhat Linux三个版 ...

  9. (转)tomcat进程意外退出的问题分析

    节前某个部门的测试环境反馈tomcat会意外退出,我们到实际环境排查后发现不是jvm crash,日志里有进程销毁的记录,从pause到destory的整个过程: org.apache.coyote. ...

  10. ununtu设置开机启动服务-手工将Tomcat设为自启动服务

    配置Ubuntu Server,上面装了一Tomcat7,希望在服务器电源打开后,希望没有登录的情况下也可以自动启动Tomcat 1.编写启动文件/etc/init.d/tomcat7 tomcat7 ...