VUE元素的隐藏和显示（v-show指令)
更新时间：2017年06月23日 11:50:38 作者：学习笔记666
本篇文章主要介绍了VUE元素的隐藏和显示（v-show指令)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
除了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家分享了Vue3的 插槽使用汇总，在 2.6.0中，vue 为具名插槽和作用于插槽引入了一个新的统一语法：v-slot。它取代了 slot 和 slot-scope 在新版中的应用，下面就一起来看看文章的详细内容吧2021-12-12
vue3+ts+vite使用el-table表格渲染记录重复情况
这篇文章主要给大家介绍了关于vue3+ts+vite使用el-table表格渲染记录重复情况的相关资料,我们可以通过合并渲染、数据缓存或虚拟化等技术来减少重复渲染的次数,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了vue实现钉钉的考勤日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了解决echarts数据二次渲染不成功的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue转react useEffect的全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
为了快速体验 MVVM 模式，我选择了非工程化方式来起步，并选择使用 Vue.js，以及基于它构建的 iView UI 框架。本文给大家分享基于 Vue.js 之 iView UI 框架非工程化实践记录，需要的朋友参考下吧2017-11-11
本文深入分析了副作用的实现以及执行时机，并详细分析了用于存储副作用函数的targetMap的数据结构及其实现原理，还深入分析了依赖收集track函数以及派发更新 trigger 函数的实现,需要的朋友可以参考下2022-08-08
在Web开发中,跨域问题是一大挑战,跨域是指网络请求从一个域名发起,而请求的目标资源位于另一个不同的域名下,通常使用Vue CLI的代理来解决跨域问题,而在生产环境中,可以通过后端配置CORS或使用Nginx反向代理,或者通过服务器中转来解决跨域问题2023-10-10
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期2022-08-08
这篇文章主要介绍了Vue的混合继承，有需要的朋友可以借鉴参考下，希望能够有所帮助，希望能够给你带来帮助2021-11-11
最新评论