企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
### v-if: `v-if `:是 vue 的一个内部指令,指令用在我们的 html 中。 `v-if` 用来判断是否加载 html 的 DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称。 关键代码: ~~~html <div v-if="isLogin">你好,bizzbee!</div> ~~~ 完整html代码: ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>v-if & v-show & v-else</title> </head> <body> <h1>v-if 判断是否加载</h1> <hr> <div id="app"> <div v-if="isLogin">你好:bizzbee</div> <div v-else>请登录后操作</div> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ isLogin:false } }) </script> </body> </html> ~~~ 这里我们在vue的data里定义了isLogin的值,当它为true时,网页就会显示:你好:JSPang,如果为false时,就显示请登录后操作。 ### v-show : 调整css中display属性,DOM已经加载,只是CSS控制没有显示出来。 ~~~html <div v-show="isLogin">你好:JSPang</div> ~~~ ### v-if 和v-show的区别: * v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。 * v-show:调整css dispaly属性,可以使客户端操作更加流畅。