vue でドロップダウン セレクターを実装してさまざまな配列を横断する方法

Web アプリケーションの開発に伴い、Vue.js を使用してアプリケーションを構築することを選択する人が増えています。Vue.js の組み込み v-for ディレクティブにより、データの走査が非常に簡単になります。この記事では、Vue.js の v-for ディレクティブを使用して、さまざまな配列を反復処理してドロップダウン セレクターを実装する方法を見ていきます。

まず、Vue インスタンスを作成し、データを定義する必要があります。この例では、果物を含む配列と野菜を含む配列の 2 つの配列を定義します。

var app = new Vue({
  el: '#app',
  data: {
    fruits: [
      '苹果',
      '香蕉',
      '芒果'
    ],
    vegetables: [
      '胡萝卜',
      '青菜',
      '土豆'
    ],
    selectedFruit: '',
    selectedVegetable: ''
  }
})

selectedFruit と selected Vegetable は、ユーザーの選択を記録するために使用されます。果物と野菜の変数野菜。 HTML では、v-model ディレクティブを使用してこれらの変数をバインドできます。

<div id="app">
  <select v-model="selectedFruit">
    <option disabled value="">请选择水果</option>
    <option v-for="fruit in fruits" :value="fruit">
      {{ fruit }}
    </option>
  </select>

  <select v-model="selectedVegetable">
    <option disabled value="">请选择蔬菜</option>
    <option v-for="vegetable in vegetables" :value="vegetable">
      {{ vegetable }}
    </option>
  </select>
</div>

上記のコードでは、v-for ディレクティブを使用して果物と野菜の配列を反復処理します。 value 属性を使用する代わりに、:value 構文を使用して各オプションの値を設定していることに注意してください。これは、オプションの値をテンプレートにハードコーディングするのではなく、動的に設定する必要があるためです。

これで、ユーザーが果物または野菜を選択すると、Vue インスタンス内の対応する変数を更新できるようになります。たとえば、果物を選択する場合、次のコードを使用して、ユーザーが選択した果物を selectedFruit に保存できます。

var app = new Vue({
  // ...
  methods: {
    selectFruit: function(event) {
      this.selectedFruit = event.target.value
    }
  }
})

selectFruit メソッドを On にバインドします。 Change イベント:

<select v-model="selectedFruit" @change="selectFruit">

同様に、ユーザーによる野菜の選択を処理する select Vegetable メソッドを作成できます。

var app = new Vue({
  // ...
  methods: {
    selectVegetable: function(event) {
      this.selectedVegetable = event.target.value
    }
  }
})

<select v-model="selectedVegetable" @change="selectVegetable">

さて、ユーザーが野菜を選択すると、果物や野菜など、ユーザーが選択したものを印刷できます。たとえば、Vue インスタンスに logSelection メソッドを作成して、選択内容をログに記録できます。

var app = new Vue({
  // ...
  methods: {
    logSelection: function() {
      console.log("水果选择: " + this.selectedFruit)
      console.log("蔬菜选择: " + this.selectedVegetable)
    }
  }
})

また、logSelection メソッドをボタンにバインドする必要があります。 when ユーザーが選択を行った後、このボタンをクリックして選択情報を印刷できます:

<button @click="logSelection">打印选择</button>

これで、ユーザーが果物または野菜を選択すると、印刷された情報がコンソールに表示されます。

概要

Vue.js の v-for ディレクティブは配列を簡単に走査するのに役立ち、v-model ディレクティブを使用してユーザーが選択した値を変数にバインドできます。 Vue インスタンス。これらの変数はいつでも使用して、必要な機能を実装できます。上の例では、2 つの異なる配列を使用してドロップダウン セレクターを作成し、ユーザーの選択をリアルタイムで記録します。

この記事が、v-for を使用して配列を走査し、Vue.js でドロップダウン セレクターを実装するのに役立つことを願っています。

以上がvue でドロップダウン セレクターを実装してさまざまな配列を横断する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。