<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> </head> <script src="./vue.js" type="text/javascript" charset="utf-8"></script> <body> <div id="app"> <input type="button" @click='f=!f' value='提交' name=""> <!-- v-if 特点:每次都会重新删除或创建元素 v-show 特点:不会删除元素 只是切换元素的 display:none 的样式 v-if 有较高的切换性能消耗 v-show 有较高的初始渲染消耗 如果元素涉及到频繁的换行,最好不要使用v-if 而推荐使用v-show 如果永远不会再显示则推荐使用 v-if --> <div v-if='f'>1111</div> <div v-show='f'>2222222</div> </div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ f:true }, methods:{ } }) </script> </body> </html>