vue支持判断,必然也有对应的标签操作

v-if

这个指令可以控制元素展示与否。

完整demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app" >
  9. <span v-if="isLove">爱你哟</span>
  10. </div>
  11. <script src="../lib/vue.js"></script>
  12. <script>
  13. var vm = new Vue({
  14. el:'#app',
  15. data:{
  16. isLove:true
  17. }
  18. })
  19. </script>
  20. </body>
  21. </html>

效果

image.png
现在我们修改isLove=false

image.png

需要注意的是这种方式它每次都真实的改变了dom,如果频繁改变,这样就不太好。
image.png

image.png