サプライズ!VUEは、実際にデータビューをドライブすることはできませんか?$設定する詳細なチュートリアル

我々はすべて知っているように。最大の利点は、データドライバVUEビューということです。データが変更された場合、ページのレンダリングに変更に待機します。
なぜ、我々は時間に変更データの配列やオブジェクトを宣言するとき。VUEと変化に聞いていませんか?
これは私は知りません。私たちは、補足されるように従うことができます。
私は見て見ていません。シュシュ来る見。
例として〜
コードは以下の通りであります:

<テンプレート>
  <div>
    <P>これは配列の私の定義</ P>
    <DIV> {{this.arr}} </ div>
    <ボタン@クリック=「changeArr」>こちらをクリックして、私は最初の配列を変更するつもりです。</ボタン>
    <P>これが私の目標です。</ P>
    <DIV> {{this.haha}} </ div>
    <ボタン@クリック=「changeObj」>私は、オブジェクトのプロパティを追加するつもりだここをクリックして</ button>の
  </ div>
</テンプレート>

<スクリプト>
輸出のデフォルト{
  名前:「テスト」、
  データ(){
    {戻ります
      ARR:[0、1、2、3、4、5、6]、
      笑:{
        名前: "123"、
        年齢:12、
        物語:「丘の上に一度」
       コンテンツ=「」
      }
    }。
  }、
  方法:{
    changeArr(){
      this.arr [0] = 112233。
      console.log(this.arr「これは改正後の配列です」)。
      $セット(編曲、0、112233);
    }、
    changeObj(){
      this.haha.contentは=「私は若い僧侶でした」。
      console.log(「これは改正オブジェクトの後で」、this.haha)。
    }
  }
}。
</ SCRIPT>

  

そして、コンテンツオブジェクトの配列は明らかに出力が変更されました。しかし、ビューのデータは変更されません。その後、削除されたを見てみましょう。

配列またはオブジェクトを削除します。

 changeArr(){
      // this.arr [0] = 112233。
      [0] this.arrを削除します。
      console.log(this.arr「これは改正後の配列です」)。
      // $セット(編曲、0、112233);
    }、
    changeObj(){
      // this.haha.content =「私は若い僧侶でした」。
      this.haha.ageを削除します。
      console.log(「これは改正オブジェクトの後で」、this.haha)。
    }

  

配列やオブジェクトを削除するには、VUEが耳にすることはできませんもあります。一つの方法は、セットの外に移動されます。

Vueがセットの配列を利用するか、ページをレンダリングするオブジェクトの内容を変更します。

配列の場合:

。この$セット(this.arr、0、112233);

オブジェクトの場合:

 。この$セット(this.haha、「コンテンツ」、「私は若い僧侶でした」);

通訳・セットのこの方法のために。
この。$セット(アレイまたはオブジェクト、インデックス名またはオブジェクトのプロパティを変更し、変更された値)

拡張:
値は配列オブジェクトである、
オブジェクト、ときにオブジェクトがあった
追加や削除が~~~それを設定する必要があります

コード

データ(){
    return {
      arr: [{ key: "name" }, { 12: "hhah" }, 2, 3, 4, 5, 6],
      haha: {
        name: {
          name: "lili"
             }
           }
    };
  },
  methods: {
    changeArr() {
      this.arr[0].key = 112233;
      console.log("这是修改之后的数组", this.arr);
    },
    changeObj() {
      this.haha.name.name = "我是一个小和尚";  
      console.log("这是修改之后的对象", this.haha); 
    }
  }

 注意到了吗。我没有用$set哦~

这么看来,修改数组中的对象,和对象中的对象是不需要用set的!

 

感谢被我骚扰的大佬们...
向你们致敬!

 

おすすめ

転載: www.cnblogs.com/JiAyInNnNn/p/11118216.html