vue menukar data dalam paparan

Semasa pembangunan projek Vue, selalunya perlu untuk menukar data untuk membentangkannya dengan lebih baik dalam paparan. Vue menyediakan pelbagai kaedah untuk melaksanakan penukaran data. Kaedah ini memudahkan anda menukar data daripada satu format kepada format yang lain, termasuk yang berikut:

Penapis

Penapis boleh digunakan untuk menukar data dalam templat. Penapis dalam Vue pada asasnya ialah fungsi, yang dipanggil dalam templat menggunakan aksara paip |. Penapis boleh menerima nilai sebagai input dan mengembalikan nilai yang diproses.

// 定义一个过滤器
Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

// 在模板中使用过滤器
<p>{{ message | reverse }}</p>

Dalam contoh di atas, kami menentukan penapis bernama reverse dalam Vue. Penapis ini menerima rentetan sebagai input dan mengembalikan rentetan terbalik. Dalam templat, kita boleh menggunakan message sebagai input, menghantarnya ke dalam penapis reverse melalui watak paip untuk diproses, dan akhirnya membentangkan hasil pemprosesan dalam paparan.

Sifat terkira

Sifat terkira boleh digunakan untuk mengisytiharkan fungsi dalam tika Vue dan menggunakannya dalam templat. Fungsi ini boleh bergantung pada data keadaan lain dan mengira semula secara automatik apabila data keadaan berubah.

// 定义一个Vue实例，并声明一个名为reversedMessage的计算属性
var vm = new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

// 在模板中使用计算属性
<p>{{ reversedMessage }}</p>

Dalam contoh di atas, kami mengisytiharkan sifat yang dikira bernama reversedMessage dalam tika Vue, yang bergantung pada message data keadaan dan penyongsangan message. Dalam templat, kita boleh terus menggunakan reversedMessage untuk mengira atribut tanpa pengiraan manual.

Pendengar

Pendengar boleh digunakan untuk mendengar perubahan dalam data status supaya paparan boleh dikemas kini apabila data berubah. Pendengar pada asasnya ialah fungsi yang dipanggil secara automatik apabila data keadaan berubah.

// 定义一个Vue实例，并声明一个名为message的状态数据和一个名为reversedMessage的监听器
var vm = new Vue({
  data: {
    message: 'Hello Vue.js!',
    reversedMessage: ''
  },
  watch: {
    message: function (newVal, oldVal) {
      this.reversedMessage = newVal.split('').reverse().join('')
    }
  }
})

// 在模板中使用监听器
<p>{{ reversedMessage }}</p>

Dalam contoh di atas, kami mengisytiharkan data keadaan bernama reversedMessage dan pendengar bernama message dalam contoh Vue. Apabila message berubah, pendengar akan dipanggil secara automatik untuk menyongsangkan message dan mengemas kini nilai reversedMessage. Dalam templat, kita boleh menggunakan reversedMessage data status, yang akan dikemas kini secara automatik apabila message berubah.

Kaedah Kaedah

boleh digunakan untuk mengisytiharkan fungsi dalam contoh Vue dan menggunakannya dalam templat. Fungsi ini boleh melakukan pemprosesan data yang kompleks dan mengembalikan hasil yang diproses.

// 定义一个Vue实例，并声明一个名为reversedMessage的方法
var vm = new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

// 在模板中使用方法
<p>{{ reversedMessage() }}</p>

Dalam contoh di atas, kami mengisytiharkan kaedah bernama reversedMessage dalam tika Vue, yang mendapat message data keadaan dan menyongsangkannya. Dalam templat, kita boleh menggunakan kaedah reversedMessage() dan memanggil kaedah terus dalam templat untuk mendapatkan data yang diproses.

Ringkasnya, Vue menyediakan pelbagai cara untuk mengubah data, termasuk penapis, sifat yang dikira, pendengar dan kaedah. Kita boleh memilih kaedah yang sesuai mengikut keperluan pembangunan khusus, dan terus mencuba dan mengoptimumkan semasa proses pembangunan.

Atas ialah kandungan terperinci vue menukar data dalam paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!