vue循環(huán)數(shù)組改變點擊文字的顏色
更新時間：2019年10月14日 08:34:09 作者：換日線°
這篇文章主要為大家詳細(xì)介紹了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)文章
vue項目打包上傳github并制作預(yù)覽鏈接（pages）
這篇文章主要介紹了vue項目打包上傳github并制作預(yù)覽鏈接（pages）的相關(guān)資料,需要的朋友可以參考下2019-04-04
解決vue中props對象中設(shè)置多個默認(rèn)值的問題
props中設(shè)置了默認(rèn)值,但是獲取時（獲取父頁面沒有傳的屬性） 打印出來是undefined,所以本文給大家介紹了解決vue中props對象中設(shè)置多個默認(rèn)值的問題,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了?面試問題Vue雙向數(shù)據(jù)綁定原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
本文主要介紹了Nginx部署Vue.js前端項目指南,幫助您實現(xiàn)從開發(fā)到線上部署的平滑過渡,確保用戶能夠獲得最佳的訪問體驗,感興趣的可以了解一下2024-09-09
這篇文章主要給大家介紹了關(guān)于vue/cli安裝報錯及解決問題的方法,如果在安裝@vue/cli時遇到錯誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下2023-07-07
針對Vue文檔中部分大家可能不會去研讀的內(nèi)容，這篇文章主要介紹了詳解Vue文檔中幾個易忽視部分的剖析，非常具有實用價值，需要的朋友可以參考下2018-03-03
Vue 報錯TypeError: this.$set is not a function 的解決方法
這篇文章主要介紹了Vue 報錯TypeError: this.$set is not a function 的解決方法，分享給大家，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了vue項目不能使用localhost訪問的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
nuxt框架中對vuex進(jìn)行模塊化設(shè)置的實現(xiàn)方法
這篇文章主要介紹了nuxt框架中對vuex進(jìn)行模塊化設(shè)置的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
npm安裝vue腳手架報錯警告npm WARN deprecated
安裝vue腳手架報錯可能具體原因比較多,可以根據(jù)報錯信息進(jìn)行排查,本文主要介紹了npm安裝vue腳手架報錯警告npm WARN deprecated,感興趣的可以了解一下2023-11-11