Bagaimana untuk mendapatkan nilai data dalam vue

Vue.js ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam bidang pembangunan bahagian hadapan. Dalam Vue, mendapatkan nilai data adalah konsep yang sangat penting. Vue menyediakan satu siri kaedah untuk mendapatkan nilai data, termasuk mendapatkan nilai dalam data, mendapatkan nilai dalam pengiraan dan mendapatkan nilai dalam prop. Dalam artikel ini, kami akan memperincikan kaedah mendapatkan nilai data ini.

1. Dapatkan nilai dalam data

Dalam contoh Vue, kita boleh mengakses objek data melalui ini.$data. Contohnya:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getData">获取数据</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  methods: {
    getData() {
      console.log(this.$data.msg)
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan atribut msg dalam data dan mengaksesnya melalui ini.$data.msg. Dengan cara ini, kita boleh mendapatkan semua nilai atribut dalam objek data.

2. Dapatkan nilai dalam pengiraan

Dikira ialah konsep yang sangat berguna dalam Vue. Sifat yang dikira adalah reaktif dan dikira semula secara automatik apabila sifat ia bergantung pada perubahan. Apabila mendapat nilai sifat yang dikira, kami boleh mengaksesnya secara langsung. Contohnya:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getData">获取数据</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      name: 'Lucy',
      age: 18
    }
  },
  computed: {
    msg() {
      return `我的名字是${this.name}，我今年${this.age}岁了。`
    }
  },
  methods: {
    getData() {
      console.log(this.msg)
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan msg atribut yang dikira, yang digunakan untuk mengira rentetan. Kami mengakses nilai harta yang dikira ini terus melalui this.msg.

3. Dapatkan nilai dalam prop

Apabila menggunakan Vue untuk membangunkan komponen, kita boleh mentakrifkan atribut props dalam komponen dan menghantar data melaluinya. Apabila mendapat nilai dalam prop, kita boleh mengaksesnya terus melalui objek props. Contohnya:

<template>
  <div>
    <p>{{msg}}</p>
  </div>
</template>
 
<script>
export default {
  props: {
    name: String,
    age: Number
  },
  computed: {
    msg() {
      return `我的名字是${this.name}，我今年${this.age}岁了。`
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan dua nama atribut props dan umur, iaitu jenis rentetan dan angka. Kami mengakses nilai mereka melalui this.name and this.age.

4. Ringkasan

Dalam Vue, mendapatkan nilai data adalah konsep yang sangat penting. Kita boleh mengakses semua nilai harta dalam objek data melalui ini.$data, dapatkan nilai harta yang dikira dengan mengakses terus harta yang dikira, dan dapatkan data yang diluluskan oleh komponen induk melalui objek props. Kaedah ini boleh membantu kami mendapatkan nilai data dengan lebih mudah dan menjadikan pembangunan bahagian hadapan lebih cekap.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai data dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!