vue循環(huán)數(shù)組改變點擊文字的顏色
更新時間：2019年10月14日 08:34:09 作者：換日線°
這篇文章主要為大家詳細介紹了vue循環(huán)數(shù)組改變點擊文字的顏色，非常實用的切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue循環(huán)數(shù)組改變點擊文字顏色的具體代碼，供大家參考，具體內(nèi)容如下
效果圖 如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
list-style: none;
margin: 0;
padding: 0;
}
.red{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in username" @click="bution(index)" :class="index == colin?'red':''">{{index}}.{{item}}</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const obj = {
username:['張三','李四','王五','二麻子'],
colin:-1,
}
const app = new Vue({
el:'#app',
data:obj,
methods:{
bution:function(e){
this.colin = e
}
}
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vite多環(huán)境配置項目高定制化能力詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了Vite的createServer啟動源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue3超出文本展示el tooltip實現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng),需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue的圖片需要用require的方式進行引入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了VUE組件的計算屬性詳解，使用計算機屬性還是methods取決于你是否需要緩存，當遍歷大數(shù)組和做大量計算時，應(yīng)當使用計算機屬性，除非你不希望得到緩存，下文來了解具體詳情2022-06-06
這篇文章主要介紹了關(guān)于移動端與大屏幕自適應(yīng)適配方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在vue中使用SockJS實現(xiàn)webSocket通信的過程
最近接到一個業(yè)務(wù)需求,需要做一個聊天信息的實時展示的界面,下面小編把實現(xiàn)過程記錄下來，對vue中使用SockJS實現(xiàn)webSocket通信的相關(guān)知識感興趣的朋友一起看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁加載效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了vue中v-text / v-html使用實例代碼詳解,非常不錯，代碼簡單易懂，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04