技术员联盟提供win764位系统下载,win10,win7,xp,装机纯净版,64位旗舰版,绿色软件,免费软件下载基地!

当前位置:主页 > 教程 > 服务器类 >

VUE元素的隐藏和显示(v-show指令)教程

来源:技术员联盟┆发布时间:2017-07-12 12:43┆点击:

除了click单击事件,还有mouseover,mouseover等鼠标事件。 

dbclick双击事件。

v-on:click/mouseover/mouseover/mousedown/dbclick/...

v-show指令

v-show="true/false" //控制元素显示/隐藏

示例代码:

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src=http://www.3lian.com/edu/2017/06-24/"http:/unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ isShow:false, }, methods:{ toggle:function(){ this.isShow = !this.isShow; } } }); } </script> </head> <body> <div id="box"> <input type="button" value="toggle" v-on:click="toggle()"> <br /> <div v-show="isShow" style="width: 100px;height: 100px;background: red"></div> </div> </body> </html>

VUE元素的隐藏和显示(v-show指令)教程 三联