<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .activated {color: red} </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click=‘handleShow‘>显示/隐藏</button> <!-- 条件渲染 --> <!-- v-if和v-show区别 当条件判断为false时 v-if不会渲染dom v-show始终都会渲染dom，通过style的display：none控制显示隐藏 --> <!-- vue会自动复用dom元素 当用户名input有值的时候，然后切换邮箱名，input会自动复用 --> <!-- 解决办法就是为input分别添加上key属性，代表vue中唯一节点 --> <div v-if="isShow">v-if{{message}}用户名：<input type="text" key="username"></div> <div v-else>{{isShow}}//v-else邮箱名：<input type="text" key="mailname"></div> <div v-show="isShow">v-show{{message}}</div> </div> </body> <script type="text/javascript"> let vm = new Vue({ el: ‘#app‘, data: { isShow: false, message: ‘显示‘ }, methods: { handleShow () { this.isShow = !this.isShow } } }) </script> </html>
原文：https://www.cnblogs.com/JunLan/p/12419058.html