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 ...
随机推荐
- 123457123456#0#----com.tym.ErTongFanPai20--前拼后广--儿童FanPai_tym
com.tym.ErTongFanPai20--前拼后广--儿童FanPai_tym
- intellij tomcat配置
目录 intellij tomcat配置 @(目录) intellij tomcat配置 如上图标注 1 所示,我们可以切换随时为项目切换不同的容器. 如上图标注 2 所示,我们可以指定给运行的容器设 ...
- c#中多线程同步Lock（锁）的研究以及跨线程UI的操作 （转）
https://www.cnblogs.com/tommyheng/p/4104552.html 本文只针对C#中,多线程同步所用到的锁(lock)作为研究对象.由于想更直观的显示结果,所以,在做de ...
- Slf4j与log4j及log4j2、logbak的关系及使用方法
Slf4j与log4j及log4j2的关系及使用方法 slf4j slf4j仅仅是一个为Java程序提供日志输出的统一接口,并不是一个具体的日志实现方案,就比如JDBC一样,只是一种规则而已,所以单独 ...
- git 操作说明
第一步:代码提交到本地仓库 第二步:更新远程服务器代码到本地,如果有冲突需要优先解决,解决冲突后执行第一步操作 第三步:推送本地代码到远程服务器,可以使用source Tree 或者工具自带的配置gi ...
- node及npm安装与配置
一,安装环境查看 软件版本选择 node 10.16.3 二,软件安装 软件下载,下载地址 https://nodejs.org/dist/ 解压安装 cp node-v10.16.3-linux-x ...
- EMQ配置通过nginx反向代理wss和ws
参考:https://www.cnblogs.com/succour/p/6305574.html EMQ官方文档:https://docs.emqx.io/broker/v3/cn/ 一,系统环境及 ...
- Xpath定位和CSS定位（***重）
1.XPath是一种在XML文档中定位元素的语言.因为HTML可以看作XML的一种实现, 所以Selenium用户可以使用这种强大的语言在Web应用中定位元素. 1.1 绝对路径定位 参考baidu. ...
- Centos7网络连接
参考链接:http://baijiahao.baidu.com/s?id=1597809303775176940(上面有些没说清楚,所以简化总结一丢丢) Step1 编辑 — 虚拟网络编辑器 — (管 ...
- Win10利用CodeBlocks搭建Objective-C开发环境（一）
为了学习ios开发,而手头没有苹果机,若在windows平台下学习objective-c编程.则需要安装OC开发环境, 经过在网上查阅各种相关资料,历经多次失败,终于安装并测试成功,特将安装过程和经验 ...