1. v-show指令
- 作用：根据表达值的真假，切换元素的显示和隐藏
- 本质：修改元素的display，实现显示隐藏
- 说明：指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏
完整代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7. <title>Document</title> 8. </head> 9. 10. <body> 11. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 12. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 13. 14. <div id='app'> 15. <!-- 直接写true/false --> 16. <!-- <img src="./test_img.jpg" alt="" v-show='true'> --> 17. 18. <!-- 动态修改 --> 19. <input type="button" value="展示切换" @click='changeIsShow'> 20. <img src="./test_img.jpg" alt="" v-show='isShow'> 21. 22. <!-- 表达式 --> 23. <input type="button" value="累加年龄" @click='addAge'> 24. <img src="./test_img.jpg" alt="" v-show='age>26'> 25. </div> 26. 27. <script> 28. var app = new Vue({ 29. el: '#app', 30. data: { 31. isShow: false, 32. age: 24 33. }, 34. methods: { 35. changeIsShow: function () { 36. this.isShow = !this.isShow 37. }, 38. addAge: function () { 39. this.age ++; 40. } 41. } 42. 43. }) 44. </script> 45. </body> 46. 47. </html>
2. v-if 指令
- 作用：根据表达式的真假切换元素的显示状态
- 本质：通过操纵dom元素来切换显示状态
- 说明：表达式的值为true，元素存在于dom树中，为false，从dom树中移除
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7. <title>Document</title> 8. </head> 9. 10. <body> 11. <div id='app'> 12. <input type="button" @click='changeShow' value="切换显示"> 13. <!-- 直接操作Dom树，性能消耗大 --> 14. <p v-if='isShow'>大家好，我是测试小白！</p> 15. 16. <!-- 控制属性display的值，操作频繁时建议使用 --> 17. <p v-show='isShow'>大家好，我是测试小白！</p> 18. 19. <!-- 表达式 --> 20. <input type="button" value="多点几下就脱单了" @click='changeAge'> 21. <h2 v-if='age>28'>恭喜你脱单了，哈哈哈哈！</h2> 22. 23. </div> 24. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 25. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 26. 27. 28. <script> 29. var app = new Vue({ 30. el: '#app', 31. data: { 32. isShow: false, 33. age:26 34. 35. }, 36. methods: { 37. changeShow: function () { 38. this.isShow = !this.isShow 39. }, 40. changeAge:function(){ 41. this.age++; 42. } 43. } 44. 45. }) 46. </script> 47. 48. </body> 49. 50. </html>
3. 总结
- v-show和v-if根据表达式的真假切换元素的显示状态
- v-show修改display；v-if操作Dom树，性能消耗大
- 元素频繁操作显示隐藏时，建议使用v-show
