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 ...
随机推荐
- GrideView（三）---编辑功能实现
GrideView(三)---编辑 法一.(优势:操作数据更加灵活:劣势: 书写较多代码,开发效率低) 通过编辑列---添加超链接(HyperlinkField)字段 ,来跳转页面实现编辑操作: 步骤 ...
- string operation in powershell
https://blogs.technet.microsoft.com/heyscriptingguy/2014/07/15/keep-your-hands-clean-use-powershell- ...
- Javaweb项目中文乱码
Javaweb项目中文乱码 一.了解常识: 1.UTF-8国际编码,GBK中文编码.GBK包含GB2312,即如果通过GB2312编码后可以通过GBK解码,反之可能不成立; 2.web tomcat: ...
- 并不对劲的bzoj5342:loj2554:uoj401:p4566: [Ctsc2018]青蕈领主
题目大意 \(T\)(\(T\leq100\))组询问 有\(1\)到\(n\)(\(n\leq50000\))这\(n\)个整数组成的一个排列 定义这个排列的一个子区间是"连续" ...
- MySQL-业务优化——说的就是变
前言 通过上次发布的业务优化不是一步到位的有不少网友问我许多关于业务优化和Web方面的问题.在这里表示感谢和支持.在期间有些回答不到位的还请谅解,并且个人经验有限. 百牛信息技术bainiu.ltd整 ...
- java获取操作系统的MAC地址和硬盘序列号
1.判断操作系统是Windows还是Linux private static Boolean isLinux() { String os = System.getProperty("os.n ...
- CodeForces 730H Delete Them (暴力)
题意:给定n个名字,然后让你删除 m 个,且这m个必须满足同一个表达式且其他的不满足,问你能不能找到一个满足条件. 析:很明显首先知道的是这 m 个如果第 i 个位置相同,那么就肯定选这个位置是最好的 ...
- Android buffer_handle_t的定义（转载）
转自:http://www.cnblogs.com/eustoma/archive/2012/06/08/2541416.html 1. buffer_handle_t 文件位置:system\cor ...
- Linux 常用命令七 grep
一.grep命令 grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜 ...
- bzoj 1296: [SCOI2009]粉刷匠【dp+背包dp】
参考:http://hzwer.com/3099.html 神题神题 其实只要知道思路就有点都不难-- 先对每一行dp,设g[i][j]为这行前i个格子粉刷了k次最大粉刷正确数,随便n^3一下就行 设 ...