- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>v-show</title>
- <script src="https://cdn.bootCSS.com/vue/2.4.2/vue.min.js"></script>
- </head>
- <body>
- <h1>v-if 和 v-show 的区别:</h1>
- <div>v-if: 判断是否加载, 可以减轻服务器的压力, 在需要时加载.<br>v-show: 调整 css dispaly 属性, 可以使客户端操作更加流畅.</div>
- <div id="app">
- <div v-if="ismsg">v-if</div>
- <div v-else="ismsg">v-else</div>
- <div v-show="ismsgs">v-show</div>
- </div>
- <script type="text/javascript">
- var app = new Vue({
- el: "#app",
- data: {
- ismsg:true,
- ismsgs:true
- }
- })
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/note/43133/4577fe39ee10219210ecb72de4587ba5.html