Vue.js中對css的操作

原文鏈接：https://blog.csdn.net/tan1071923745/article/details/81162667
此篇博客爲轉載內容，做個記錄，方便自己日後查找使用

總結下面的內容，最簡單的方式是給需要操作的dom元素添加ref="refName"屬性，
然後通過this.$refs.refName.style.要修改的樣式=修改的值 即可完成修改css

使用v-bind：class或者v-bind:style或者直接通過操作dom來對其樣式進行更改；

1.v-bind:class || v-bind:style

其中v-bind是指令，: 後面的class 和style是參數，而class之後的值在vue的官方文檔裏被稱爲’指令預期值’（這個不必深究，反正個人覺得初學知道他叫啥名有啥用就好了）同v-bind的大多數指令（部分特殊指令如V-for除外）一樣，除了可以綁定字符串類型的變量外，還支持一個單一的js表達式，也就是說v-bind：class的’指令預期值’除了字符串以外還可以是對象或者數組（‘v-bind：’中的v-bind可省略）。

1.1:對象語法：

通過對象來綁定v-bind:class=“{‘css類名’:控制是否顯示（true or false)}”

<template>
	<div>
		<div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的對象更改&&綁定test</span></div>
	</div>
</template>
<script>
	export default {
		name: 'mytest',
		data() {
			return {
				display: true
			}
		},
		mounted() {},
		computed: {},
		methods:{}
	}
</script>
 
<style>
	.colordisplay {
		display: inline;
		background: red;
		border: 1px solid blue
	}
</style>

如果display爲true，那麼此時該部分的class就是 class=“mycolor colordisplay”,通過設置display的值就可以控制colordisplay的顯示

如果要設置綁定多個class的話就和正常的對象鍵值對一樣中間用逗號隔開就可以了
v-bind:class="{‘colordisplay’:display,‘ispay’:pay}"

1.2:內聯樣式：

v-bind:style=‘mycolor’

template

<div :style='mypagestyle'><span>1.2我的樣式內聯更改&&綁定test</span></div>

data

mypagestyle:{color: 'yellow',background:"blue"},

1.3:數組語法：

也可以通過數組來綁定 v-bind:style=’[mycolor1,mycolor2]’

<div :style="[myarr,myarrtest]"><span>1.3我的數組更改&&綁定test</span></div>

然後設置返回的數據爲

myarr:{color: 'white'},
myarrtest:{background:'#000',display:'inline'},

2.計算屬性

也可以通過計算屬性計算（適用於較爲複雜判斷）樣式

<div class='computed' :class='compuretu'>2.計算屬性判斷</div>

將計算屬性的返回值作爲類名，通過判斷serd和slid的值來控制樣式的顯示與否

    data() {
			return {serd:true,slid:true}
    }, 
	computed: {
			compuretu: function() {
				return {compuretu: this.serd && this.slid}
			}
	}

設置樣式

.compuretu{color:white;background: red}

3.操作節點

由於vue本身是虛擬dom如果通過document來進行節點樣式更改的時候有可能會出現’style’ is not definde的錯誤，

這個問題的解決方式就必須得對vue 的理解要求更高一層了，它可以通過在vue本身的週期mounted函數裏用ref和$refs 來獲取樣式，來完成對其樣式的更改：示例如下：

<template>
	<div>
		<div style=“color: green;” ref="abc">
			<span>我的test</span>
		</div>
	</div>
</template>
 
<script>
 
export default {
	name: 'mytest',
	data() {
		return {}
	},
	mounted() {
		console.log(this.$refs.abc.style.cssText);
	}
}
<script>
 
<style>
</style>

說明：

1. ref被用來給元素（子組件）註冊引用信息；
2. vm.$refs 一個對象，持有已註冊過 ref 的所有子組件（或HTML元素）；

使用：在 HTML元素 中，添加ref屬性，然後在JS中通過vm.$refs.屬性來獲取

上述會將style的內容全部輸出（color: green;）

這樣的話對其進行更改就可以對相應的屬性直接更改（this.$refs.abc.style.color=red）

<template>
	<div>
		<div :class='{mycss}'><span>我的單個class屬性的test</span></div>
		<div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的對象更改&&綁定test</span></div>
		<div :style='mypagestyle'><span>1.3我的樣式內聯更改&&綁定test</span></div>
		<div :style="[myarr,myarrtest]"><span>1.3我的數組更改&&綁定test</span></div>
		<div class='computed' :class='compuretu'>2.計算屬性判斷</div>
		<div style="color: green;" ref="abc"><span>3.我的dom更改test</span></div>
	</div>
</template>
 
<script>
	export default {
		name: 'mytest',
		data() {
			return {
				serd:true,
				slid:true,
				mycss: {
					color: ''
				},
				mypagestyle:{
					color: 'yellow',
					background:"blue"
				},
				myarr:{
					color: 'white'
				},
				myarrtest:{
					background:'#000',
					display:'inline'
				},
				display: true
			}
		},
		mounted() {　　
			console.log(this.$refs.abc.style.cssText)
			this.$refs.abc.style.color = 'red' //修改屬性
			this.$refs.abc.style.background = 'black' //新增屬性
			this.$refs.abc.style.display = 'inline' 
			console.log(111)　
			console.log(this.$refs.abc.style.display)　
		},
		computed: {
			compuretu: function() {
				return {
					compuretu: this.serd && this.slid
				}
			}
		},
		methods:{
			
		}
 
	}
</script>
 
<style>
	.mycss {
		color: blue
	}
	
	.colordisplay {
		display: inline;
		background: red;
		border: 1px solid blue
	}
	
	.mycolor {
		color: orange
	}
	.computed {
		border: 1px solid yellow
	}
	.compuretu{
		color:white;
		background: red;
	}
</style>