vue.js仿hover效果的實(shí)現(xiàn)方法示例
更新時(shí)間：2019年01月28日 11:34:27 作者：s_psycho
這篇文章主要介紹了vue.js仿hover效果的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了vue.js仿hover效果的實(shí)現(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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行效果：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue?el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列具體代碼
最近遇到一個(gè)動(dòng)態(tài)增加行和列的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue?el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue3 表單搜索內(nèi)容回顯到地址欄的實(shí)例代碼
這篇文章主要介紹了vue3 表單搜索內(nèi)容回顯到地址欄的實(shí)例代碼,地址欄輸入內(nèi)容回顯到form表單,同理表單輸入內(nèi)容也要回顯到地址欄中,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue使用canvas畫布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能(最新推薦)
這篇文章主要介紹了vue使用canvas畫布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能,經(jīng)過(guò)本文一番研究發(fā)現(xiàn)canvas標(biāo)簽可以完成很多功能，電子簽名，點(diǎn)位標(biāo)注，問(wèn)題標(biāo)注，畫圖功能，感興趣的朋友跟隨小編一起看看吧2023-07-07
Vue觸發(fā)隱藏input file的方法實(shí)例詳解
這篇文章主要介紹了Vue觸發(fā)隱藏input file的方法實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue3.0手動(dòng)封裝分頁(yè)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue中forEach循環(huán)的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
最近入職了新公司,接手了一個(gè)新拆分出來(lái)的Vue項(xiàng)目,針對(duì)該項(xiàng)目做了個(gè)打包優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中打包優(yōu)化的四種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決
這篇文章主要介紹了vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何清除地址欄參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中router.beforeEach()的簡(jiǎn)單用法舉例
router.beforeEach()一般用來(lái)做一些進(jìn)入頁(yè)面的限制,比如沒(méi)有登錄,就不能進(jìn)入某些頁(yè)面,只有登錄了之后才有權(quán)限查看某些頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于vue中router.beforeEach()的簡(jiǎn)單用法舉例,需要的朋友可以參考下2023-01-01