vue項目點擊元素后如何改變樣式

更新時間：2023年10月10日 14:35:32 作者：曹家小樂樂

這篇文章主要介紹了vue項目點擊元素后如何改變樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue項目點擊元素后改變樣式

點擊元素都改變其樣式的步驟

示例：

想實現(xiàn)點擊產(chǎn)品名稱時其顏色變?yōu)樗{色：

點擊前：

點擊后樣式改變：

使用步驟

1.在template顯示的數(shù)據(jù)中添加單擊事件和樣式綁定：

代碼如下（示例代碼為uniapp）：

<view class="z-tr" v-for="(item,index) in productList" :key="item.id">
	  <view class="z-td">{{index + 1 }}</view>
	  <view class="z-td" :class="{'visited':isvisited==index}" @click="visitfun(index)">{{ item.productname }}</view>
	  <view class="z-td text-green">{{ item.successmessage }}</view>
	  <view class="z-td text-red">{{ item.faillmessage }}</view>
 </view>

2.data數(shù)據(jù)層：

代碼如下（示例）：

注意：

isvisited：-1時候默認不選中任何元素。等于isvisited：0 默認選中第一個元素

data() {
		return {
			isvisited: -1,
			}
		}

3.methods添加事件：

methods: {
	visitfun(index){
		this.isvisited=index;
	},
}

4.在style中設(shè)置想要改變的樣式，這里就只是將字體設(shè)置成藍色：

<style>
	.visited{
			color: blue;
		}
</style>

vue動態(tài)更改元素樣式

在vue項目開發(fā)中，好多地方需要動態(tài)去改變元素的樣式，例如：更改元素class名去更換元素的樣式，或更改元素的style去更改元素樣式。

元素的顯示、隱藏、大小、顏色等，也可以配合vuex使用實現(xiàn)類似主題話的更改。

動態(tài)更改style

通過style取值為變量來實現(xiàn)動態(tài)控制樣式的效果

<template>
  <div :style="{background:yanse,width:kuai,height:gao+'px'}">
  </div>
</template>
<script>
export default {
    data(){
        return{
            yanse:"red",
            kuai:"100px",
            gao:100
        }
    }
}
</script>
<style>
</style>

通過class名去更改元素樣式

通過三目運算符來實現(xiàn)元素樣式的切換

<template>
  <div :class='state?"red":"blue"'>
  </div>
</template>
<script>
export default {
    data(){
        return{
            state:true,
        }
    }
}
</script>
<style>
    .red{
        width: 100px;
        height: 100px;
        background: red;
    }
    .blue{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>