v-if和v-show:创建,删除,显示,隐藏
HTML和效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>蜀云泉</title> <script type="text/javascript" src="../lib/vue-2.6.10.js"></script> </head> <body> <!-- 这个div就是MVVM中的V,View --> <div id="app"> <input type="button" value="点我" @click="flag=!flag"> <h3 v-if="flag">这是v-if控制的元素</h3> <h3 v-show="flag">这是v-show控制的元素</h3> </div> <script> // 这个vm就是MVVM中的VM,ViewModel var vm=new Vue({ el: '#app', // 这个data就是MVVM中的M,Model data: { flag:true }, methods: { } }) </script> </body> </html>
效果图:点击按钮,下面的会消失,再点击会出现