uniappはメソッド関数のスタイルを変更します

uniapp の開発では、ページのスタイルを動的に変更する必要がよくあります。一般的な方法の 1 つは、メソッド関数でスタイルを変更することです。この記事では、このメソッドの実装方法について説明します。

一般的に、関数内で uni-app が提供する組み込みメソッドを使用してスタイルを変更できます。たとえば、関数で uni.$refs を使用して、ページ内の特定のコンポーネントを取得できます。次に、style や class などのコンポーネントのプロパティを通じてスタイルを動的に変更できます。

このプロセスをよりよく理解するために、具体的な例を使用してみましょう。小さなプログラムのログイン ページがあり、ページのレイアウト スタイルが次のとおりであるとします。

<template>
  <view>
    <form>
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
      <button>登录</button>
    </form>
  </view>
</template>

<style scoped>
  form {
    width: 80%;
    margin: 10vw;
    padding: 5vw;
    background-color: #fff;
  }
  input {
    margin-bottom: 3vw;
    width: 100%;
    height: 10vw;
    border: 0;
    border-radius: 3vw;
    background-color: #f2f2f2;
  }
  button {
    width: 100%;
    height: 12vw;
    border: 0;
    border-radius: 3vw;
    color: #fff;
    background-color: #007aff;
    font-size: 4.5vw;
  }
</style>

次の要件を実装する必要があると仮定します。ユーザーがフォームを送信するとき、フォームの入力ボックスが入力されていない場合は、その下枠の色を赤に変更する必要があります。具体的には、placeholder 属性の値を unfilled に変更し、スタイル border-bottom-color: red を入力ボックスに追加する必要があります。

この要件を達成するには、まず uni.$refs メソッドを使用して入力ボックス コンポーネントを取得し、次にコンポーネントのスタイルを変更する必要があります。

<template>
  <view>
    <form>
      <input ref="username" type="text" placeholder="用户名" />
      <input ref="password" type="password" placeholder="密码" />
      <button @click="login">登录</button>
    </form>
  </view>
</template>

<script>
export default {
  methods: {
    login() {
      if (!this.$refs.username.value.trim()) {
        this.$refs.username.placeholder = '未填写'
        this.$refs.username.style.borderBottomColor = 'red'
      }

      if (!this.$refs.password.value.trim()) {
        this.$refs.password.placeholder = '未填写'
        this.$refs.password.style.borderBottomColor = 'red'
      }
    },
  },
}
</script>

上記のコードでは、各入力ボックス コンポーネントに ref 属性を追加して、コンポーネントへの参照を取得しました。ログイン関数では、入力ボックスの内容が空かどうかを判断し、空の場合は、placeholder 属性の値を Unfilled に変更し、スタイルを追加します。入力ボックス。border-bottom-color: red。

refs. の代わりに $refs. を使用していることに注意してください。これは、ユニアプリでは $refs がビルドされるためです。 -in ref プロパティを持つすべてのコンポーネントにアクセスできるオブジェクト。

つまり、この記事を通じて、uni-app のメソッド関数でスタイルを変更する方法を学びました。もちろん、これは実装方法の 1 つにすぎず、関数内で this.setData() メソッドを使用してデータの状態を変更する、CSS 疑似クラス セレクターを使用するなど、他にも多くの方法があります。 、 等々。これらのスキルを習得することで、ユーザーのニーズに合わせてページ スタイルをより柔軟に適応させることができます。

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