JS+CSS實(shí)現(xiàn)消息的點(diǎn)擊展示和隱藏(H5端)
Vue 組件
創(chuàng)建一個(gè)名為 ToggleMessage.vue 的組件：
<template>
<div class="toggle-container">
<button @click="toggleMessage">點(diǎn)擊展示/隱藏消息</button>
<div v-if="showMessage" class="message-box">
這是一條消息。
</div>
</div>
</template>
<script>
export default {
data() {
return {
showMessage: false,
};
},
methods: {
toggleMessage() {
this.showMessage = !this.showMessage;
},
},
};
</script>
<style scoped>
.toggle-container {
margin: 20px;
}
.message-box {
margin-top: 10px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>功能解釋
數(shù)據(jù)和狀態(tài): 我們使用一個(gè)名為
showMessage的數(shù)據(jù)屬性來(lái)控制消息框的顯示或隱藏。切換消息顯示: 我們定義了一個(gè)
toggleMessage方法，當(dāng)用戶點(diǎn)擊按鈕時(shí)，該方法會(huì)被觸發(fā)，并改變showMessage的值。消息框: 我們使用了 Vue 的條件渲染（
v-if指令）來(lái)根據(jù)showMessage的值來(lái)展示或隱藏消息框。樣式: 我們使用簡(jiǎn)單的 CSS 來(lái)設(shè)置按鈕和消息框的樣式。
這個(gè)組件實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的消息展示和隱藏功能，適用于移動(dòng)端 H5 頁(yè)面。你可以根據(jù)需要進(jìn)行更多的定制和擴(kuò)展。希望這個(gè)簡(jiǎn)單的示例能幫助你實(shí)現(xiàn)你需要的功能！
到此這篇關(guān)于JS+CSS實(shí)現(xiàn)消息的點(diǎn)擊展示和隱藏(H5端)的文章就介紹到這了,更多相關(guān)JS+CSS消息展示和隱藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用了window.onresize但是發(fā)現(xiàn)每次 onresize 后頁(yè)面中狀態(tài)總是不對(duì)，下面與大家分享下onresize 事件多次觸發(fā)的解決方法2013-11-11
JavaScript引用類型Object常見(jiàn)用法實(shí)例分析
這篇文章主要介紹了JavaScript引用類型Object常見(jiàn)用法,簡(jiǎn)單描述了javascript基本數(shù)據(jù)類型,并結(jié)合實(shí)例形式分析了引用類型Object基本創(chuàng)建、賦值、訪問(wèn)屬性等基本操作技巧,需要的朋友可以參考下2018-08-08
JavaScript Accessor實(shí)現(xiàn)說(shuō)明
關(guān)于Getter與Setter大家一定不會(huì)陌生,下面簡(jiǎn)單介紹幾種我所知道的在JavaScript中實(shí)現(xiàn)G/S的方法.2010-12-12
webpack3升級(jí)到webpack4遇到問(wèn)題總結(jié)
這篇文章主要介紹了webpack3升級(jí)到webpack4遇到問(wèn)題總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
hover效果，想必大家并不陌生吧，接下來(lái)為大家介紹下使用js模仿hover，感興趣的朋友可以參考下2013-12-12
JavaScript前端中的偽類元素before和after使用詳解
before和after也算是css里面最常見(jiàn)的元素了，而我卻一直不太了解，再不學(xué)一下就真的太不像話了。所以學(xué)習(xí)一下，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
兼容IE與firefox火狐的回車事件(js與jquery)
今天看了網(wǎng)上的朋友說(shuō)了，很多網(wǎng)站提供的回車事件代碼都是不兼容firefox的，其實(shí)腳本之家提供的代碼，一直以來(lái)都是盡量的兼容多瀏覽器。2010-10-10
javascript實(shí)現(xiàn)可鍵盤(pán)控制的抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)可鍵盤(pán)控制的抽獎(jiǎng)系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-03-03
前端常見(jiàn)的數(shù)據(jù)緩存方案及其實(shí)現(xiàn)細(xì)節(jié)
緩存機(jī)制隨處可見(jiàn),優(yōu)秀的緩存機(jī)制可以縮短網(wǎng)頁(yè)請(qǐng)求資源的事件,減少延遲,這篇文章主要介紹了前端常見(jiàn)的數(shù)據(jù)緩存方案及其實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-07-07
