uniapp はスタイルを動的に変更します

はじめに

UniApp では、昼夜モードの切り替え、フォント サイズの調整など、スタイルを動的に変更する必要があることがよくあります。現時点では、スタイルを動的に変更するスキルを習得する必要があります。この記事では、スタイルの変更をより適切に制御するためによく使用されるいくつかの方法を紹介します。

1. Vue の計算プロパティを使用する

Vue の計算プロパティは、従属変数に基づいて新しいプロパティ値を動的に計算できるため、それを使用してスタイルを動的に変更できます。

たとえば、昼夜モードを制御するためにデータ内で変数 isNight を定義し、計算結果で対応するスタイルを計算できます。

<template>
  <div :style="themeStyle">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      isNight: false // 默认为白天模式
    }
  },
  computed: {
    themeStyle () {
      return {
        // 日间模式样式
        backgroundColor: this.isNight ? '#37474f' : '#fafafa',
        color: this.isNight ? '#fff' : '#000',
        // 其他属性
      }
    }
  }
}
</script>

このように、isNight 変数が存在する限り、変更すると、スタイルは自動的に更新されます。

2. ref を使用して要素を取得する

DOM 要素のスタイルを直接操作する必要がある場合は、ref を使用して要素を取得できます。

<template>
  <div ref="myDiv">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    changeStyle () {
      const myDiv = this.$refs.myDiv
      myDiv.style.color = 'red'
      myDiv.style.fontSize = '20px'
      // 其他样式
    }
  }
}
</script>

このようにして、changeStyle メソッドでスタイルを動的に変更できます。

3. JavaScript を使用してスタイルを設定する

最も直接的な方法は、JavaScript を使用してスタイルを設定することです。要素のスタイル オブジェクトを取得して、対応する属性の値を変更するだけです。

<template>
  <div id="myDiv">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    changeStyle () {
      const myDiv = document.getElementById('myDiv')
      myDiv.style.color = 'red'
      myDiv.style.fontSize = '20px'
      // 其他样式
    }
  }
}
</script>

この方法では、追加のスタイル ルールを記述する必要はありませんが、元のスタイル ルールが上書きされないように、スタイルを変更するタイミングを確保する必要があることに注意してください。

4. グローバル スタイルとローカル スタイル

UniApp を使用してプロジェクトを開発するときに、「一部のスタイルが App.vue で定義された後に他のページに表示されるのはなぜですか?」という疑問に遭遇したことがあるかと思います。効果は出るでしょうか？

これは、App.vue のスタイルがグローバル スタイルであり、すべてのページで共有されるためです。ローカル スタイルを定義する必要がある場合は、対応するページのスタイル ファイルで定義できます。

たとえば、App.vue でグローバル スタイルを定義します:

<style>
/* 全局样式 */
body {
  background-color: #fafafa;
}
</style>

このスタイルはすべてのページで共有されます。特定のページでスタイルを変更する必要がある場合は、次のように変更できます。ページ内のスタイル。ファイルで定義されます。

<style>
/* 局部样式 */
body {
  background-color: #37474f;
}
</style>

このようにして、ページの本文スタイルはグローバル本文スタイルをオーバーライドします。

結論

この記事では、Vue の計算プロパティの使用、ref を使用した要素の取得、JavaScript を使用したスタイル、グローバル スタイル、ローカル スタイルの設定など、スタイルを動的に変更する一般的な方法をいくつか紹介します。 UniApp 開発でスタイルの動的な変更に遭遇するすべての人にとって、この記事が役立つことを願っています。

以上がuniapp はスタイルを動的に変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。