JavaScript

超轻量级php框架startmvc

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

更新时间:2020-05-19 09:54:02 作者:startmvc
除了click单击事件,还有mouseover,mouseover等鼠标事件。dbclick双击事件。v-on:click/mouseover/mouseo

除了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://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显示隐藏 v-show显示隐藏