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 ...
随机推荐
- Linux查找含有特定字符串的文件
Linux查找含有特定字符串的文件命令为grep.以下为详细的使用方法 grep [OPTIONS] PATTERN [FILE...] #实例:递归查找当前文件夹下所有含有test的文件,并显示行号 ...
- ubuntu18.04安装DB2 11.1 Express-c
参考连接:https://developer.ibm.com/answers/questions/280797/download-db2-express-c-105-1/ 这个参考页面提供了DB2 E ...
- 使用docker搭建FastDFS文件系统
1.首先下载FastDFS文件系统的docker镜像 docker search fastdfs 2.使用docker镜像构建tracker容器(跟踪服务器,起到调度的作用): docker run ...
- 【CUDA开发】CUDA面内存拷贝用法总结
[CUDA开发]CUDA面内存拷贝用法总结 标签(空格分隔): [CUDA开发] 主要是在调试CUDA硬解码并用D3D9或者D3D11显示的时候遇到了一些代码,如下所示: CUdeviceptr g_ ...
- idea的项目转maven项目
鼠标右键pom.xml>>>>>> Add as Maven Project
- 问题（一）升级Appium最新遇到滑动的坑
Appium的JAVA客户端更新到java-client 6.0.0-BETA3后,发现其中有关于界面滑动(swipe TouchAction)方面的升级(也有可能在之前的版本已经更新过类似的内容,没 ...
- start use webpack
Demo0操作手册 本Demo演示不使用配置文件的入门级使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpack webp ...
- Ubuntu 中改变文件的默认打开方式(转)
源自:Ubuntu 中改变文件的默认打开方式 1. 相关配置文件 全局配置 /etc/gnome/defaults.list /usr/share/applications/mimeinfo.cac ...
- （1）Spirng Boot 入门（笔记）
文章目录 简介 优点 Hello World 打包成可执行 jar 细节探究 主程序类,主入口类上面的注解 自动生成的项目结构分析 简介 Spring Boot 帮助我们简化 Spring 应用开发: ...
- 共阳极RGB LED二极管
1)RGB LED二极管有四个引脚,它把3个普通led被封装在其内部,这三个led颜色分别为红.绿.蓝三种颜色,通过控制各个LED的亮度,你可以混合出几乎任何你想要的颜色,如下图: 2)RGB LED ...