1.1. 效果 (05_条件渲染/test.html)
05_条件渲染.gif
1.2. 条件渲染指令
1) v-if 与 v-else 2) v-show
1.3. 比较 v-if 与 v-show
3) 如果需要频繁切换 v-show 较好 4) 当条件不成立时,v-if 的所有子节点不会解析(项目中使用)
1.4. 编码
<div id=”demo”> <h2 v-if=”ok”>表白成功</h2> <h2 v-else>表白失败</h2> <h2 v-show=”ok”>求婚成功</h2> <h2 v-show=”!ok”>求婚失败</h2>
<br> <button @click=”ok=!ok”>切换</button> </div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> var vm = new Vue({ el: ‘#demo’, data: { ok: false } }) </script>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 大数据培训HDFS客户端环境准备
下一篇: 前端培训Vue列表渲染
