博客详情

vue中v-if和v-show指令(显示/隐藏) (原创)

作者: 朝如青丝暮成雪
发布时间:2019-03-23 15:37:23  文章分类:vue   阅读(1128)  评论(0)


vue中v-if和v-show指令介绍: 

v-if 切换时每次都会删除和创建元素 
v-show 切换时不会删除和创建元素,只会设置display属性为none和删display属性 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue-2.2.2.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="flag=!flag"> 切换</button>
<!--v-if 切换时每次都会删除和创建元素-->
<h3 v-if="flag">aaaa</h3>
<!-- v-show 切换时不会删除和创建元素,只会设置display属性为none和删display属性-->
<h3 v-show="flag">bbbb</h3>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
flag:true
},
methods:{
}
});
</script>
</html>

关键字:  vue  v-if  v-for

上一篇:vue中v-for遍历

下一篇:shiro入门-第一篇

评论信息
暂无评论
发表评论

亲,您还没有登陆,暂不能评论哦! 去 登陆 | 注册

博主信息
   
数据加载中,请稍候...
文章分类
   
数据加载中,请稍候...
阅读排行
 
数据加载中,请稍候...
评论排行
 
数据加载中,请稍候...

Copyright © 叮叮声的奶酪 版权所有
备案号:鄂ICP备17018671号-1

鄂公网安备 42011102000739号