站长资源<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue点击切换显示隐藏</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
</style>
</head>
<body>
<div id="demo">
<button @click="showMsg" >投保须知</button>
<div v-show="isShow" style="width: 300px;height: 300px;position: absolute;top: 0;left: 0;background: #ffff;border: 1px solid #ccc;">
这里是协议的内容这里是协议的内容这里是协议的内容这里是协议的内容这里是协议的内容这里是协议的内容<br/><br/><br/><br/><br/>
<button @click="hideMsg">我知道了</button>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#demo",
data:{
isShow:false
},
methods:{
showMsg:function(){
this.isShow = !this.isShow;
},
hideMsg:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
vueJS简单的点击显示与隐藏的效果
本文出处：来自互联网信息共享，请勿相信收费信息站长资源 » vueJS简单的点击显示与隐藏的效果
评论前必须登录！
注册