Vue.js 点击按钮显示/隐藏内容的实例代码
更新时间：2018年02月08日 09:24:06 作者：h5css3_linhuai
下面小编就为大家分享一篇Vue.js 点击按钮显示/隐藏内容的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
实例代码：
<!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>
</head>
<body>
<div id="example">
<button v-text="btnText" @click="showToggle"></button>
<p v-show="isShow">原本可以成为Google、Facebook的“爸爸”，或者微软的“儿子”，最后却像“孙子”一样被贱卖，沦为互联网浪潮的“弃子”。</p>
</div>
<script type="text/javascript">
new Vue({
el:"#example",
data:{
btnText:"隐藏",
isShow:true
},
methods:{
showToggle:function(){
this.isShow = !this.isShow
if(this.isShow){
this.btnText = "隐藏"
}else{
this.btnText = "显示"
}
}
}
})
</script>
</body>
</html>
以上这篇Vue.js 点击按钮显示/隐藏内容的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue3如何采用 App.vue定义全局变量与方法并实现局部页面刷新效果,文中的示例代码讲解详细,需要的可以参考一下2024-01-01
这篇文章主要介绍了如何让别人访问本地运行的vue项目，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文介绍了Vue.js在SEO优化方面的挑战,并提供了一些方法来解决这些问题,包括使用服务器端渲染、预渲染和使用VueRouter的History模式来生成静态HTML页面,以及添加meta信息和内部链接来提高搜索引擎的索引和排名2025-02-02
这篇文章主要介绍了vue绑定class的三种方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了详解关于element级联选择器数据回显问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要给大家分享的是Vue3的几个优势，Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化，下面我们一起进入文章看看具体详情吧2021-10-10
Vite是一个开发环境工具，旨在提高我们的开发速度,下面这篇文章主要给大家介绍了关于如何为老vue项目添加vite支持的相关资料,需要的朋友可以参考下2021-09-09
Vue el-table表头上引入组件不能实时传参解决方法分析
这篇文章主要介绍了Vue el-table表头上引入组件不能实时传参解决方法，总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路2022-11-11
这篇文章主要介绍了vue - props 声明数组和对象操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论