vue2.0版本指令v-if与v-show的区别
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。
v-if示例：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="vue2.2.js"></script>
</head> <body>
<!--与v-else一样，v-else-if 必须要在v-if或者-else-if之后-->
<div id="app">
<h1>hello,VueJs</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age>=25">Age1:{{age}}</h1>
<h1 v-else-if="age<25">Age2:{{age}}</h1>
<h1 v-if="name.indexOf('ab')>=0">name1:{{name}}</h1>
<h1 v-else>Name2:{{name}}</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
yes: true,
no: false,
age: 18,
name: "Mr.lan"
}
})
</script>
</body> </html>
v-show示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
</head>
<body>
<!--注意v-show不支持<template>语法
注意v-show的元素会始终渲染并保持在DOM中，v-show是简单的切换元素的css属性display-->
<div id="app">
<p v-show="ok">v-show演示1</p>
<p v-show="!ok">v-show演示2</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
ok:false
}
})
</script>
</body>
</html>
vue2.0版本指令v-if与v-show的区别的更多相关文章
- vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- vue2.0自定义指令的使用方法
感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...
- vue2.0 自定义指令详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue2.0 v-model指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue2.0原理-指令
指令是 模板解析 的续章,本文会尝试从源码的角度来理解 指令 是如何被提取和应用的. 指令的提取 指令的提取过程是在parse阶段进行的,在 parseHTML 方法中,会解析字符串模板为如下的单个a ...
- Vue2.0 - 自定义指令 vue-directive
Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用 ...
- vue2.0 自定义指令
Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...
- vue2.0版本中v-html中过滤器的使用
Vue 2.0 不再支持在 v-html 中使用过滤器 解决方法: 1:全局方法(推荐) 2:computed 属性 3:$options.filters(推荐) 1:使用全局方法: 可以在 Vue ...
随机推荐
- js需要注意的地方
1.function xx(){}定义函数,而对象和函数合写才是方法. 2.typeof返回一个用于识别其运算数类型的字符串.但是需要注意的是,比如typeof null返回的对象是object而不是 ...
- YTU 1009: University
1009: University 时间限制: 1000 Sec 内存限制: 64 MB 提交: 44 解决: 24 题目描述 在大学里,很多单词都是一词多义,偶尔在文章里还要用引申义.这困扰Red ...
- 解决多次异步请求紊乱问题 - JavaScript
加入目前的需求这样的: 左边的菜单链接,点击后通过异步请求返回其HTML代码,然后innerHTML到右面的DIV中,加入切换菜单的速度非常快,最终会导致请求紊乱. 可以加入消息管理机制, ...
- 提高你的Python: 解释‘yield’和‘Generators（生成器）’
在开始课程之前,我要求学生们填写一份调查表,这个调查表反映了它们对Python中一些概念的理解情况.一些话题("if/else控制流" 或者 "定义和使用函数" ...
- Educational Codeforces Round 23 A-F 补题
A Treasure Hunt 注意负数和0的特殊处理.. 水题.. 然而又被Hack了 吗的智障 #include<bits/stdc++.h> using namespace std; ...
- 基于《Hadoop权威指南 第三版》在Windows搭建Hadoop环境及运行第一个例子
在Windows环境上搭建Hadoop环境需要安装jdk1.7或以上版本.有了jdk之后,就可以进行Hadoop的搭建. 首先下载所需要的包: 1. Hadoop包: hadoop-2.5.2.tar ...
- Linux的gnu c下itoa的代替函数用sprintf（转载）
转自:http://www.linuxidc.com/Linux/2011-01/31600.htm int number = 12345; char string[25]; // itoa(numb ...
- Linux 常用命令九 tar
一.tar命令 tar命令用于打包,解包. gzip命令用于压缩,解压缩. bzip2命令用于压缩,解压缩. 这三个是在linux中常用的,还有一些不常用的. tar打包: wang@wang:~/w ...
- 深入浅出索引--Mysql45讲笔记记录 打卡day3
看了极客时间的mysql45讲记录一下自己理解的关于索引部分 为什么会有索引呢? 答:索引就像书的目录一样,可以让你快速知道你要看的部分在多少页.换句话说,索引就是为了提高数据库的查询效率. 索引的数 ...
- 数字货币期货与现货JavaScript量化策略代码详解汇总
1.动态平衡策略 按照当前的 BTC 的价值,账户余额保留￥5000 现金和 0.1个 BTC,即现金和BTC 市值的初始比例是 1:1. 如果 BTC 的价格上涨至￥6000,即 BTC 市值大于账 ...