Vue(v-show简介)

时间:2025-04-28 08:02:47
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-show</title> </head> <body> <div id="app"> <input type="button" value="切换显示状态" @click="changeIsShow"><!--这里的@还记得吗? 是v-on 的缩写--> <input type="button" value="累加年龄" @click="addAge"> <!-- 这里通过v-show控制图片的显示与否 --> <image v-show="isShow" src="u=493687242,3723125905&fm=26&gp="></image> </div> <script src="/npm/vue/dist/"></script> <script> var app = new Vue({ el:"#app", data:({ isShow:false, age:17 }), methods:{ changeIsShow:function(){ this.isShow=!this.isShow; }, addAge:function(){ this.age++; } }, }) </script> </body> </html>