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      &&  testspan>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=「myclor cordisplay」となり、displayの値を設定することでcordisplayの表示を制御することができます
複数のclassをバインドする場合は、通常のオブジェクトキー値と同じ中間をカンマで区切っておけばよいv-bind:class=「{colordisplay':display,'ispay':pay}」

1.2:インラインスタイル:

v-bind:style=‘mycolor’
template

<div :style='mypagestyle'><span>1.2        &&  testspan>div>

data

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

1.3:配列構文:

v-bind:style='[mycolor 1,myclor 2]'を配列でバインドすることもできます.

<div :style="[myarr,myarrtest]"><span>1.3      &&  testspan>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自体の周期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>

説明:

refは、要素(サブコンポーネント)に参照情報を登録するために使用される.

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   testspan>div>
		<div class='mycolor' :class="{'colordisplay':display}"><span>1.1      &&  testspan>div>
		<div :style='mypagestyle'><span>1.3        &&  testspan>div>
		<div :style="[myarr,myarrtest]"><span>1.3      &&  testspan>div>
		<div class='computed' :class='compuretu'>2.      div>
		<div style="color: green;" ref="abc"><span>3.  dom  testspan>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>