Vue で配列の値を変更する方法

PHPz

リリース： 2023-04-12 10:51:27

オリジナル

3122 人が閲覧しました

Vue は、最新の Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue では、配列の操作は一般的なタスクです。配列内の値を変更する場合は、さまざまなオプションがあり、Vue のレスポンシブデザインにより、これらの変更が UI に自動的に反映されます。この記事では、Vue で配列の値を変更する方法を紹介します。

Vue での配列の変更

Vue は JavaScript で配列をカプセル化し、それに応答性の高い機能を追加します。この機能により、Vue はデータの変更を検出し、それに応じて DOM 内のコンテンツを更新できるようになります。配列を変更すると、Vue はビューを自動的に更新します。 Vue で配列の値を変更する方法は次のとおりです。

直接変更

新しい値を直接割り当てることで、配列を変更できます。簡単な例を次に示します。

// 定义一个数组
let myArray = ["a", "b", "c"]

// 直接更改数组的值
myArray[0] = "d"

// Vue自动更新UI
console.log(myArray) // ["d", "b", "c"]

ログイン後にコピー

新しい値を直接割り当てると、Vue がいつ変更が発生したかを認識できなくなる可能性があります。したがって、配列インスタンスの組み込みメソッド (push()、pop()、splice() など) を変更することで、配列の値を変更できます。

Vue インスタンスの配列を変更する

Vue インスタンスの配列を変更すると、Vue は DOM 内のコンテンツを自動的に更新します。配列を変更するには、Vue インスタンスのデータプロパティに配列を割り当てます。以下に例を示します。

new Vue({
  data: {
    myArray: ["a", "b", "c"]
  }
})

// 修改Vue实例中的数据
this.myArray[0] = "d"

// Vue自动更新UI
console.log(this.myArray) // ["d", "b", "c"]

ログイン後にコピー

Vue インスタンスでの配列メソッドの変更

Vue インスタンスには、配列を変更するメソッドがあります。これらのメソッドは、Vue インスタンス内のデータを自動的に更新し、DOM 内のコンテンツを変更します。 Vue インスタンスを使用した例を次に示します。

new Vue({
  data: {
    myArray: ["a", "b", "c"]
  },
  methods: {
    changeArray() {
      this.$set(this.myArray, 0, "d")
    }
  }
})

// 调用方法来更改数组
this.changeArray()

// Vue自动更新UI
console.log(this.myArray) // ["d", "b", "c"]

ログイン後にコピー

Vue 配列メソッドには、push()、splice()、pop() および配列を変更できるその他のメソッドが含まれます。これらのメソッドを使用すると、Vue は応答データを自動的に更新し、UI を更新します。

Vue.set() を使用して配列を変更する

Vue.set() を使用して Vue インスタンスの配列を変更します。 Vue.set() を使用すると、配列に新しい値を設定し、変更を追跡して正しく応答することができます。 Vue.set() の使用例を次に示します。

new Vue({
  data: {
    myArray: ["a", "b", "c"]
  },
  methods: {
    changeArray() {
      this.$set(this.myArray, 0, "d")
    }
  }
})

// 使用Vue.set()修改数组
Vue.set(this.myArray, 0, "d")

// Vue自动更新UI
console.log(this.myArray) // ["d", "b", "c"]

ログイン後にコピー

Vue.set() は、変更する配列、変更するインデックス、新しい値の 3 つのパラメータを取ります。