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

首先,在跟着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. [windows]win10家庭版切换到管理员账户

    背景:很多时候,在安装或者运行某些程序时会需要到管理员账户运行.而在win10家庭版却没有明显的位置可以让用户简单的进行切换.因此,有了以下的方法. 方法: 1.在搜索框中输入CMD,右键以管理员方式 ...

  2. crontab不执行perl脚本分析

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

  3. SQL SERVER CHAR ( integer_expression )各版本返回值差异的案例

    我们都知道CHAR(integer_expression)将ASCII代码转换为字符.当integer_expression介于 0 和 255 之间的整数.如果该整数表达式不在此范围内,将返回 NU ...

  4. 【转】js 关键字 in 的使用方法

    js 关键字 in 的使用方法  原文地址:http://sunct.iteye.com/blog/1709017   1.For...In 声明用于对数组或者对象的属性进行循环/迭代操作. 对于数组 ...

  5. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  6. sql 计算周围公里语句

    $lng2 = set_post('lng'); //当前位置坐标 $lat2 = set_post('lat'); round((*ATAN2(SQRT(SIN((`gps`.`gps_lat`-$ ...

  7. Redis学习资源

    1 redis官方网站 http://redis.io/ 2 redis中文 http://redisdoc.com/ 3 redis的设计与实现 http://www.redisbook.com/ ...

  8. Redis3 本地安装集群的记录

    引用CSDN文章 环境 centos6.7 目标 redis 三主三从的集群 step 1 编译,如果出错,则根据提示安装依赖 tar -zxvf redis-3.0.0.tar.gz mv redi ...

  9. 导入项目时,有关[2016-04-03 20:38:02 - Dex Loader] Unable to execute dex: Multiple dex files 问题

    最近我在学习androidUI设计,在网上找了一个UI菜单界面开源代码示例,按照步骤导入项目,运行的时候控制台结果报了如下错误: [2016-04-03 20:38:02 - Dex Loader] ...

  10. EF 数据库连接字符串-集成安全性访问 SQL Server

    使用 Windows 集成安全性访问 SQL Server 如果您的应用程序运行在基于 Windows 的 Intranet 上,则也许可以将 Windows 集成身份验证用于数据库访问.集成安全性使 ...