vuejsでCSSを変更する方法

vuejs で CSS を変更する方法: 1. "v-bind:class" または "v-bind:style" コマンドを使用して CSS スタイルを変更します; 2. dom を操作して CSS スタイルを直接変更します。

この記事の動作環境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

vuejs で CSS を変更するには?

Vue.jsでcssを操作(修正)する方法を詳しく解説

v-bind:classやv-bind:styleを使うか直接渡すdom を操作してスタイルを変更します;

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

ここで、v-bind は命令であり、その後に次のように続きます。クラスとスタイルはパラメータで、クラスの後のポインタはvueの公式ドキュメントでは「命令期待値」と呼ばれています（これについては立ち入る必要はありません。とにかく、初心者はその名前を知っておくと便利だと思います） v- と同じ バインドのほとんどの命令 (V-for などの特殊な命令を除く) と同様に、文字列型変数のバインドに加えて、単一の js 式、つまり v- の期待値もサポートします。 bind:class'命令 '文字列の他にオブジェクトや配列も可能です('v-bind:'のv-bindは省略可能)。

1.1: オブジェクト構文:

オブジェクトを介して v-bind をバインド: class="{'css クラス名': 表示するかどうかを制御 (true または false)}"

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

display が true の場合、この部分のクラスは class="mycolor colordisplay",display の値を設定することで colordisplay の表示を制御できます

バインディングを設定します。複数のクラスを指定する場合は、通常のオブジェクトのキーと値のペアのようにカンマで区切ってください。v-bind:class="{'colordisplay':display,'ispay':pay}"

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

v-bind:style='mycolor'

template

<p :style=&#39;mypagestyle&#39;><span>1.2我的样式内联更改&&绑定test</span></p>

data

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

1.3: 配列構文:

配列を通じてバインドすることもできます v-bind:style='[mycolor1,mycolor2]'

<p :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></p>

次に、返されるデータは

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

2 です。計算プロパティ

は、計算プロパティ (より複雑な判断に適しています) スタイル

<p class=&#39;computed&#39; :class=&#39;compuretu&#39;>2.计算属性判断</p>

を通じて計算することもできます。属性の値をクラス名として使用し、serdとslideの値を判断してスタイルの表示を制御します。

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

スタイルを設定します

。 compuretu{color:white;background: red }

3. ノードの操作

vue 自体は仮想 dom であるため、ノード スタイルを変更するとドキュメント, 'style' が表示される可能性があります。定義されていないエラー,

この問題を解決するには、vue についてのより高いレベルの理解が必要です。定期的にマウントされた関数で ref と $refs を使用してスタイルを取得できますスタイルの変更を完了するには: 例は次のとおりです:

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

説明:

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

2. vm.$refs は、ref を登録したすべてのサブコンポーネント (または HTML 要素) を保持するオブジェクトです;

使用法: HTML 要素に ref 属性を追加し、vm.$ を渡します。 JS の refs. 取得する属性

上記はスタイルの内容をすべて出力します (色: 緑;)

これを変更する場合は、対応する属性 (##) を直接変更できます。 #this.$ refs.abc.style.color=red

）<pre class="brush:js;"><template> <p> <p :class=&#39;{mycss}&#39;><span>我的单个class属性的test</span></p> <p class=&#39;mycolor&#39; :class="{&#39;colordisplay&#39;:display}"><span>1.1我的对象更改&&绑定test</span></p> <p :style=&#39;mypagestyle&#39;><span>1.3我的样式内联更改&&绑定test</span></p> &lt;p :style=&quot;[myarr,myarrtest]&quot;&gt;&lt;span&gt;1.3我的数组更改&amp;&amp;绑定test&lt;/span&gt;&lt;/p&gt; &lt;p class=&amp;#39;computed&amp;#39; :class=&amp;#39;compuretu&amp;#39;&gt;2.计算属性判断&lt;/p&gt; <p style="color: green;" ref="abc"><span>3.我的dom更改test</span></p> </p> </template> <script> export default { name: &#39;mytest&#39;, data() { return { serd:true, slid:true, mycss: { color: &#39;&#39; }, mypagestyle:{ color: &#39;yellow&#39;, background:"blue" }, myarr:{ color: &#39;white&#39; }, myarrtest:{ background:&#39;#000&#39;, display:&#39;inline&#39; }, display: true } }, mounted() {　　 console.log(this.$refs.abc.style.cssText) this.$refs.abc.style.color = &#39;red&#39; //修改属性 this.$refs.abc.style.background = &#39;black&#39; //新增属性 this.$refs.abc.style.display = &#39;inline&#39; 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></pre>もちろん、最後の方法は初心者には少し理解しにくいかもしれないので、最初のいくつかの方法を使用することをお勧めします

推奨学習: 「

vue チュートリアル

」

以上がvuejsでCSSを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。