Vue.js click button to show/hide content
Jun 07, 2018 am 11:14 AMBelow I will share with you an example code of Vue.js showing/hiding content by clicking a button. It has a good reference value and I hope it will be helpful to everyone.
Example code:
<!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>
<p id="example">
<button v-text="btnText" @click="showToggle"></button>
<p v-show="isShow">原本可以成为Google、Facebook的“爸爸”，或者微软的“儿子”，最后却像“孙子”一样被贱卖，沦为互联网浪潮的“弃子”。</p>
</p>
<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>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Use mint-ui to achieve the three-level linkage effect of provinces and municipalities
Use vue2.0.js to achieve multiple Cascading selector
Compare the time of the same day through JavaScript
The above is the detailed content of Vue.js click button to show/hide content. For more information, please follow other related articles on the PHP Chinese website!
Hot Article
Hot tools Tags
Hot Article
Hot Article Tags
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Win11 input method floating window hidden settings
Dec 30, 2023 pm 11:24 PM
Win11 input method floating window hidden settings
How to hide Windows 11 taskbar icons?
Jan 06, 2024 am 08:38 AM
How to hide Windows 11 taskbar icons?
How to hide WeChat friends without blocking or deleting them? How to hide WeChat friends without blocking or deleting them
Mar 13, 2024 pm 07:19 PM
How to hide WeChat friends without blocking or deleting them? How to hide WeChat friends without blocking or deleting them
How to hide Smart Island on Xiaomi Mi 14?
Mar 18, 2024 pm 03:40 PM
How to hide Smart Island on Xiaomi Mi 14?
How to hide works in Douyin short videos How to hide personal video works
Mar 12, 2024 pm 12:49 PM
How to hide works in Douyin short videos How to hide personal video works
How to deeply clean the hidden junk on your phone (completely remove junk from your phone's memory)
Jun 01, 2024 am 09:29 AM
How to deeply clean the hidden junk on your phone (completely remove junk from your phone's memory)
Reasons and solutions for desktop layout being locked
Feb 19, 2024 pm 06:08 PM
Reasons and solutions for desktop layout being locked
Detailed tutorial on hiding works on Douyin
Mar 25, 2024 pm 03:11 PM
Detailed tutorial on hiding works on Douyin
