vue實(shí)現(xiàn)手風(fēng)琴效果
更新時間：2021年11月25日 15:27:13 作者：溫L
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)手風(fēng)琴效果的具體代碼，供大家參考，具體內(nèi)容如下
利用鼠標(biāo)移入移出事件實(shí)現(xiàn)內(nèi)容出現(xiàn)隱藏
用到的知識點(diǎn)：
1.@mouseover 鼠標(biāo)移入事件
2.@mouseout 鼠標(biāo)移出事件
3.v-if 條件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 簡單樣式設(shè)置 -->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.title{
width: 90px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #AFAFAF;
}
.active{
background-color: #000000;
color: white;
}
</style>
</head>
<body>
<div id="box">
<ul class="ul">
<!-- 鼠標(biāo)移入移出事件 -->
<li @mouseover="num=1" @mouseout="num=0" class="title">標(biāo)題1</li>
<!-- 條件渲染 -->
<li v-if="num==1">h1h1h1h1</li>
<li v-if="num==1">h1h1h1h1</li>
<li v-if="num==1">h1h1h1h1</li>
<li v-if="num==1">h1h1h1h1</li>
</ul>
<ul class="ul">
<li @mouseover="num=2" @mouseout="num=0" class="title">標(biāo)題2</li>
<li v-if="num==2">h2h2h2h2</li>
<li v-if="num==2">h2h2h2h2</li>
<li v-if="num==2">h2h2h2h2</li>
<li v-if="num==2">h2h2h2h2</li>
</ul>
<ul>
<li @mouseover="num=3" @mouseout="num=0" class="title">標(biāo)題3</li>
<li v-if="num==3">h3h3h3hh3</li>
<li v-if="num==3">h3h3h3hh3</li>
<li v-if="num==3">h3h3h3hh3</li>
<li v-if="num==3">h3h3h3hh3</li>
</ul>
</div>
</body>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data() {
return {
num: 0
}
}
})
</script>
</html>
結(jié)果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)輸入框只允許輸入數(shù)字
在vue項(xiàng)目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了vue 中filter的多種用法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-04-04
progressbar組件在一個可以直接運(yùn)行的npm包，通過Yeoman進(jìn)行構(gòu)建，再通過Gulp+Webpack構(gòu)建工具。這篇文章給大家介紹了Vue進(jìn)度條progressbar組件2018-04-04
vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡單的數(shù)據(jù)雙向綁定問題
vue是一款具有響應(yīng)式更新機(jī)制的框架，既可以實(shí)現(xiàn)單向數(shù)據(jù)流也可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡單的數(shù)據(jù)雙向綁定問題,需要的朋友可以參考下2019-06-06
vue中如何使用embed標(biāo)簽PDF預(yù)覽
這篇文章主要介紹了vue中如何使用embed標(biāo)簽PDF預(yù)覽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了Vue子組件調(diào)用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
該文章主要介紹了如何在Vue項(xiàng)目中解決IE瀏覽器的兼容性問題,包括解決IE不兼容axios的Promise對象、ES6語法以及polyfill的使用方法,通過配置babel-polyfill、es6-promise和轉(zhuǎn)ES5語法,解決了在IE瀏覽器中常見的兼容性問題,需要的朋友可以參考下2025-01-01
Vue3?函數(shù)式彈窗的實(shí)例小結(jié)
這篇文章主要介紹了Vue3?函數(shù)式彈窗的實(shí)例小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
vue.js todolist實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js todolist實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-10-10