<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>对比v-if与v-show的使用</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body class="native"> <div id="example"> <!-- 频繁切换显示隐藏：display:none --> <p v-show="isHidden"> 默认单行(需要替换) </p> <template v-show="!isHidden"> <h5>自定义多行显示：template替换内容</h5> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> <!-- 三个判断以上：切换显示Dom节点 --> <template> <span v-if="isShow">成功</span> <span v-else-if="isHidden">失败</span> <span v-else-if="isHidden">已终止</span> <span v-else>运行中</span> </template> </div> </body> <script> var examleVM2 = new Vue({ el: '#example', data: { isShow: true, isHidden: false, } }) </script> </html>
vue权威指南笔记02——对比v-if与v-show
猜你喜欢
转载自www.cnblogs.com/wheatCatcher/p/10222315.html
今日推荐
周排行