vue.js仿hover效果的實現(xiàn)方法示例
更新時間：2019年01月28日 11:34:27 作者：s_psycho
這篇文章主要介紹了vue.js仿hover效果的實現(xiàn)方法,結(jié)合實例形式分析了vue.js事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了vue.js仿hover效果的實現(xiàn)方法。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
margin:100px ;
}
li{
width: 50px;
height: 50px;
border: 1px solid;
float: left;
text-align: center;
line-height: 50px ;
}
.act{
background: red;
}
</style>
</head>
<body>
<ul id="app">
<li @click="fun(x)" v-for="x in num" :class="index===x?'act':''">{{x}}</li>
</ul>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
num:10,
index:1,
},
methods:{
fun(x){
this.index=x
}
}
})
</script>
</html>
這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行效果：
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了vue3?hook自動導(dǎo)入的原理,介紹了API的自動導(dǎo)入及組件的自動導(dǎo)入，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
優(yōu)雅的將ElementUI表格變身成樹形表格的方法步驟
這篇文章主要介紹了優(yōu)雅的將ElementUI表格變身成樹形表格的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue router 通過路由來實現(xiàn)切換頭部標(biāo)題功能
在做單頁面應(yīng)用程序時，一般頁面布局頭尾兩塊都是固定在布局頁面，中間為是路由入口。這篇文章主要介紹了vue-router 通過路由來實現(xiàn)切換頭部標(biāo)題 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue 使用OSS上傳圖片或附件講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue-router如何實時動態(tài)替換路由參數(shù)(地址欄參數(shù))
這篇文章主要介紹了vue-router如何實時動態(tài)替換路由參數(shù)(地址欄參數(shù))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+element-ui?校驗開始時間與結(jié)束時間的實現(xiàn)代碼
這篇文章主要介紹了vue+element-ui?校驗開始時間與結(jié)束時間的代碼實現(xiàn),最主要的需求是開始時間不能早于當(dāng)前時間,感興趣的朋友跟隨小編一起看看吧2024-07-07
Create?vite理解Vite項目創(chuàng)建流程及代碼實現(xiàn)
這篇文章主要為大家介紹了Create?vite理解Vite項目創(chuàng)建流程及代碼實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)本地購物車功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要給大家介紹了關(guān)于vue動態(tài)合并單元格并添加小計合計功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JS 實現(xiàn)獲取對象屬性個數(shù)的方法小結(jié)
這篇文章主要介紹了JS 實現(xiàn)獲取對象屬性個數(shù)的方法,結(jié)合實例形式總結(jié)分析了JS 獲取對象屬性個數(shù)的三種常用方法,需要的朋友可以參考下2023-05-05