uniappで選択のデフォルト値を設定する方法

ユニアプリ開発では、ページ上のドロップダウン選択ボックス (選択) を使用することが多く、ユーザーの操作を容易にするためにデフォルトのオプションを設定する必要がある場合があります。この記事では、uniapp のドロップダウン選択ボックスのデフォルト値を設定する方法を紹介します。

1. v-model を使用してデータを双方向にバインドする

vue では、v-model は通常、input や select などのフォーム要素の双方向のバインドを実現するために使用されます。 v-model はコンポーネント データを自動的に更新するため、データ内でデフォルトのオプション値を定義し、それを v-model にバインドできます。サンプル コードは次のとおりです。

<template>
  <select v-model="selected">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '2' // 设置默认选项为选项二
    }
  }
}
</script>

上記のコードでは、デフォルト オプションの値を 2 に設定しているため、ページ上のドロップダウン選択ボックスはデフォルトでオプション 2 を選択します。デフォルトのオプションを変更する必要がある場合は、データで選択した値を変更するだけで済みます。

2. ref を使用して選択インスタンスを取得します

コード内でドロップダウン選択ボックスのデフォルト値を動的に設定する必要がある場合があります。このとき、選択インスタンスを取得できます。 ref を通じてインスタンスを取得し、Select コンポーネントの setValue メソッドを呼び出してデフォルト値を設定します。サンプル コードは次のとおりです。

<template>
  <select ref="mySelect">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
  </select>
</template>

<script>
export default {
  mounted() {
    // 获取select实例
    const mySelect = this.$refs.mySelect.$el
    // 设置默认值为选项三
    mySelect.setValue('3')
  }
}
</script>

上記のコードでは、マウントされたライフ サイクルで選択インスタンスを取得し、それを変数 mySelect に割り当てます。次に、Select コンポーネントの setValue メソッドを呼び出し、パラメーター 3 を渡して、デフォルトのオプションをオプション 3 に設定します。

概要

v-model と ref を通じて、ドロップダウン選択ボックスの静的および動的なデフォルト値設定をそれぞれ実現できます。実際の開発では、ユーザーが使いやすいように、ニーズに応じてさまざまな方法を選択できます。

以上がuniappで選択のデフォルト値を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。