js を使用して vue の CSS を変更する

はじめに

Vue.js は人気のある JavaScript フレームワークで、軽量の MVVM フレームワークと多くのツールを備えているため、フロントエンド エンジニアにとって最初の選択肢となります。 Vue.js フレームワークでは、JavaScript コードの CSS スタイルを変更する必要があることがよくあります。これは、この記事でも説明されているトピックです。

JS を使用して Vue で CSS を変更する

Vue.js では、CSS スタイルを簡単にバインドして、スタイルを動的に変更できます。ただし、シナリオによっては、JavaScript コードを通じて CSS スタイルを変更する必要がある場合があります。現時点では、Vue.js が提供するいくつかのツールとメソッドを使用する必要があります。

1. $refs を通じて要素を取得する

Vue.js では、$refs を使用して DOM 要素を取得し、JavaScript を通じて要素の CSS スタイルを変更できます。たとえば、次のコードは、$refs を通じて DOM 要素を取得し、要素の背景色を変更する方法を示しています。

HTML:

<div ref="mydiv">这是一个DIV元素</div>

JavaScript:

<script>
export default {
  mounted(){
    this.$refs.mydiv.style.backgroundColor = 'red'
  }
}
</script>

The上記のコードでは、マウントされたフック関数で this.$refs を使用して、ID「mydiv」の DOM 要素を取得し、要素の背景色を変更します。

DOM 要素は関数の実行後にのみ正しくレンダリングされるため、$refs はマウントされた関数内でのみ使用できることに注意してください。

2. vue-style-loader の使用

Vue.js には、DOM の途中にスタイル シートを動的に挿入できる非常に便利なツール vue-style-loader が用意されています。次のコードを使用して vue-style-loader をインストールできます:

npm install vue-style-loader --save-dev

使用法は次のとおりです:

JavaScript:

<style>
  .myclass {
    background-color:red;
  }
</style>

<script>
import 'vue-style-loader'

export default {
  mounted(){
    const style = document.createElement('style')
    style.innerText = `
      .myclass {
        background-color: yellow;
      }
    `
    document.head.appendChild(style)
  }
}
</script>

上記のコードでは、vue を使用します。 -style-loader スタイル シートは DOM に動的に挿入されます。 JavaScript を使用して、このスタイル シートの CSS スタイルを動的に変更することもできます。

3. 計算プロパティの使用

Vue.js では、計算プロパティを通じて CSS スタイル オブジェクトを返すことができるため、それらを Vue テンプレートに直接バインドできます。 CSS スタイルは次のとおりです。より使いやすくなります。たとえば、次のコードは、計算プロパティを使用して CSS スタイルを返す方法を示しています。

JavaScript:

<script>
export default {
  data(){
    return {
        bgColor: 'red'
    }
  },
  computed:{
    myStyle(){
      return {
        backgroundColor: this.bgColor
      }
    }
  }
}
</script>

<template>
  <div :style="myStyle">这是一个DIV元素</div>
</template>

上記のコードでは、計算プロパティ myStyle を通じて CSS スタイル オブジェクトを返します。要素のbackgroundColorプロパティが含まれます。

結論

この記事では、JavaScript を使用して Vue.js フレームワークで CSS スタイルを変更する方法を紹介します。 DOM 要素を取得し、$refs を使用してその CSS スタイルを変更したり、vue-style-loader を使用してスタイル シートを動的に挿入したり、計算されたプロパティを使用して CSS スタイル オブジェクトを返すことができます。 Vue.js プロジェクトの開発中に問題が発生した場合は、これらのヒントが問題の解決に役立つと思います。

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