다른 배열을 탐색하기 위해 vue에서 드롭다운 선택기를 구현하는 방법-프런트엔드 Q&A-php.cn

다른 배열을 탐색하기 위해 vue에서 드롭다운 선택기를 구현하는 방법

PHPz

풀어 주다： 2023-03-31 14:13:05

원래의

1178명이 탐색했습니다.

웹 애플리케이션이 개발되면서 점점 더 많은 사람들이 Vue.js를 사용하여 애플리케이션을 구축하고 있으며 Vue.js에 내장된 v-for 지시문을 사용하면 데이터 탐색이 매우 쉬워집니다. 이 기사에서는 Vue.js의 v-for 지시문을 사용하여 다양한 배열을 반복하여 드롭다운 선택기를 구현하는 방법을 살펴보겠습니다.

먼저 Vue 인스턴스를 생성하고 데이터를 정의해야 합니다. 이 예에서는 하나는 과일을 포함하고 다른 하나는 야채를 포함하는 두 개의 배열을 정의합니다.

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

로그인 후 복사

여기서 selectedFruit 및 selectedVegetable은 사용자가 선택한 과일을 기록하고 야채 변수. HTML에서는 v-model 지시문을 사용하여 이러한 변수를 바인딩할 수 있습니다. selectedFruit 和 selectedVegetable 是用来记录用户选择的水果和蔬菜的变量。在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 方法绑定到 change 事件上：

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

로그인 후 복사

类似地，我们可以创建一个 selectVegetable 方法来处理用户选择的蔬菜：

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

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

로그인 후 복사

위 코드에서는 v-for 지시문을 사용하여 과일 및 야채 배열을 반복합니다. value 속성을 사용하는 대신 :value 구문을 사용하여 각 옵션의 값을 설정합니다. 옵션 값을 템플릿에 하드코딩하는 것이 아니라 동적으로 설정해야 하기 때문입니다.

이제 사용자가 과일이나 야채를 선택하면 Vue 인스턴스에서 해당 변수를 업데이트할 수 있습니다. 예를 들어, 과일을 선택할 때 다음 코드를 사용하여 사용자가 선택한 과일을 selectedFruit에 저장할 수 있습니다:

rrreee

selectFruit 메소드를 change/에 바인딩 code> 이벤트: <p>rrreee</p>마찬가지로 <code>selectVegetable 메소드를 생성하여 사용자의 야채 선택을 처리할 수 있습니다.

rrreeerrreee

이제 사용자가 과일이나 야채를 선택하면 사용자를 인쇄할 수 있습니다. 선택. 예를 들어 Vue 인스턴스에서 logSelection 메소드를 생성하여 선택 항목을 기록할 수 있습니다. 🎜rrreee🎜또한 logSelection 메소드를 버튼에 바인딩해야 합니다. 사용자가 선택한 후 이 버튼을 클릭하면 선택 정보를 인쇄할 수 있습니다. 🎜rrreee🎜 이제 사용자가 과일이나 야채를 선택하면 콘솔에 인쇄된 정보를 볼 수 있습니다. 🎜🎜요약🎜🎜 Vue.js의 v-for 지시어는 배열을 쉽게 탐색하는 데 도움이 되며, v-model 지시어를 사용하여 사용자가 선택한 값을 Vue 인스턴스의 변수에 바인딩할 수 있습니다. 이러한 변수는 필요한 기능을 구현하기 위해 언제든지 사용할 수 있습니다. 위의 예에서는 두 개의 서로 다른 배열을 사용하여 드롭다운 선택기를 만들고 사용자의 선택을 실시간으로 기록합니다. 🎜🎜이 기사가 v-for를 사용하여 배열을 탐색하고 Vue.js에서 드롭다운 선택기를 구현하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 다른 배열을 탐색하기 위해 vue에서 드롭다운 선택기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!