Vue指令之`v-if`和`v-show`
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
<body>
<div class="box">
<!-- v-if 等于true的时候 会把这个元素彻底移除掉-->
<h1 v-if="flog">这里显示的是v-if绑定的数据</h1>
<!-- v-show 等于true的时候，会把这个元素设置成display：none-->
<h1 v-show="flog">这里显示的是v-show绑定的数据</h1>
<input type="button" value="切换按钮" @click ="btnClick">
</div> <script src="lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
flog:true
},
methods:{
btnClick:function(){
this.flog=!this.flog
}
}
});
</script>
经典案例 购入车选项 使用v-if 和v-else 或者 v-else if
<div class="box">
<button @click="handleClick()">Click</button>
<div v-if="isCheck">空空如也</div>
<ul v-else>
<li v-for="item in gouru" >{{item}}</li>
</ul>
</div> <script src="vue-2.4.0.js"></script>
<script>
var vm= new Vue({
el:'.box',
data:{
isCheck:true,
gouru:['11111','22222','33333']
},
methods: {
handleClick:function () {
this.isCheck=! this.isCheck
},
},
})
</script>
</body>
</html>
Vue指令之`v-if`和`v-show`的更多相关文章
- vue的使用与安装 npm -v报错
1.先将node从官方文档下载下来,然后进行安装. 安装成功后,在dos命令中node -v.npm -v来测试,如果成功就可以安装cnpm(国内淘宝镜像比较快).这里我遇到一个bug,npm -v压 ...
- Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- [Vue] : Vue指令
Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...
- Vue学习笔记【7】——Vue指令之v-model和双向数据绑定
v-model是唯一可以实现双向数据绑定的vue指令 单向数据绑定:修改内存中的数据,页面上同步更改.v-bind <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法 ...
- 第三篇：Vue指令
Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...
- 02 Vue指令
Vue指令 1.文本相关指令 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> < ...
- Vue --- 指令练习
scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom', math: 67, chinese: 52 ...
- Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
v$database: 视图结构: SQL> desc v$database; Name Null? Type - ...
- POJ2762 Going from u to v or from v to u(单连通 缩点)
判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...
- Going from u to v or from v to u?_POJ2762强连通+并查集缩点+拓扑排序
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Description I ...
随机推荐
- CTF 资源
1.<CTF 工具集>包括web工具.渗透环境.隐形工具.逆向工具.漏洞扫描工具.sql注入工具.暴力破解工具.加解密工具等等. 参考地址:https://www.ctftools.com ...
- 安装Windows和Ubuntu双系统2
安装Windows和Ubuntu双系统 0.552016.12.10 15:54:41字数 2101阅读 6644 这几天开始动手做毕设啦,打算好好过把Linux瘾,接下来便是这两天我在联想电脑上安装 ...
- GitToc-为你的Github仓库的Readme自动生成一个目录
维护自己的Github仓库的时候发现Github的Readme不支持Toc目录,所以就自己写了一个小工具. 工具地址:https://github.com/Holy-Shine/GitToc 简介 如 ...
- 构建Springboot项目的3种方式
一.自己创建: 1.创建maven项目 2.pom.xml添加如下内容: <!--1.指定依赖都由springboot管理--> <parent> <groupId> ...
- 爬虫存储介质之MongoDB存储
常用数据库 mongoDB4.0: 下载:https://www.mongodb.com/ windows安装.Linux安装见: https://www.runoob.com/mongodb/mon ...
- MapReduce示例式理解
从word count这个实例理解MapReduce. MapReduce大体上分为六个步骤:input, split, map, shuffle, reduce, output.细节描述如下: 1. ...
- k8s ingres 的安装与使用
1. 安装. 从ingress的官网下载yaml文件. https://raw.githubusercontent.com/kubernetes/ingress-nginx/master/deploy ...
- JAVA httpURLConnection curl
// 文件路径 D:\ApacheServer\web_java\HelloWorld\src\com\test\TestHttpCurl.java package com.test; import ...
- 以环形角度理解php数组索引
array_slice ( array $array , int $offset [, int $length = NULL [, bool $preserve_keys = false ]] ) : ...
- windows密码凭据