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 ...
随机推荐
- 【Tomcat】Tomcat 配置JNDI数据源（三）
数据源的由来 在Java开发中,使用JDBC操作数据库的四个步骤如下: ①加载数据库驱动程序(Class.forName("数据库驱动类");) ②连接数据库(Connec ...
- Linux系统调优——磁盘I/O（三）
(1).查看I/O运行状态相关工具 1)查看文件系统块大小 对于ext4文件系统,查看文件系统块大小 [root@CentOS6 ~]# tune2fs -l /dev/sda1 | grep siz ...
- spring 依赖注入的3种方式
在实际环境中实现IoC容器的方式主要分为两大类,一类是依赖查找,依赖查找是通过资源定位,把对应的资源查找回来:另一类则是依赖注入,而Spring主要使用的是依赖注入.一般而言,依赖注入可以分为3种方式 ...
- 【 Linux 】Systemd 配置文件说明及编写（2）
1. 开机启动 对于支持 systemd 的软件,如果想要设置开机启动,就执行如下命令(以 http 为例): systemctl enable httpd 上面的命令相当于在 /etc/system ...
- 如何修改WAMPServer默认的网站路径地址
通常,我们安装WAMPServer集成的PHP开发环境之后,默认的网站路径地址是其安装目录下子文件夹:"wamp/www/".那么我们怎么修改网站地址到自己指定的路径呢?本篇经验将 ...
- 2019年Java面试题基础系列228道（6）
51.ArrayList 与 LinkedList 的不区别? 最明显的区别是 ArrrayList 底层的数据结构是数组,支持随机访问,而LinkedList 的底层数据结构书链表,不支持随机访问. ...
- 微信小程序 之页面跳转
wxml: <view><button bindtap="abc" >跳转</button></view> js: abc: (e) ...
- windows环境下安装: VMware 15 + centos 7
第一步: 下载 centos7 http://isoredirect.centos.org/centos/7/isos/x86_64/ 选择阿里云镜像下载,速度最快 注意: 尽量使用下载工具下载, ...
- Universial robot 运动学
1 正运动学: 1.1 DH方法理解 第i个坐标系固连在第i个连杆的左端.轴i固连于i-1杆,在i-1杆的右端. i坐标系固定在i杆上,随这i杆转动. 每个连杆有四个参数,第i个连杆: ai = ( ...
- qt qml Treeview使用记录--设置每个Item的图片logo,高度
这篇帮助很大: https://blog.csdn.net/qq_32116695/article/details/81298585, 代码如下: TreeView { id: viewTree an ...