Pengenalan terperinci kepada penggunaan ungkapan dalam Vue.js

Vue.js ialah rangka kerja MVVM bahagian hadapan, dengan ungkapan ialah konsep penting yang disediakan oleh Vue.js dalam templat. Ungkapan digunakan terutamanya untuk memproses output data dan operasi dalam templat untuk menunjukkan hasil yang diharapkan oleh pengguna. Artikel ini akan memperkenalkan secara terperinci cara menggunakan ungkapan dalam Vue.js.

Apakah itu ungkapan

Dalam Vue.js, ungkapan ialah ungkapan JavaScript yang disertakan dalam pendakap kerinting berkembar {{}}. Vue.js melaksanakan pengikatan dan pemaparan data dengan menilai ungkapan.

Sebagai contoh, jika kita ingin mengeluarkan nilai pembolehubah message dalam templat, kita boleh menggunakan kod berikut dalam fail HTML:

<div>{{ message }}</div>

Di sini {{ message }} ialah ungkapan , ia akan digantikan dengan nilai pembolehubah message.

Sudah tentu, ungkapan tidak terhad kepada output pembolehubah mudah. Ungkapan juga boleh melakukan beberapa operasi mudah, seperti pengiraan, panggilan fungsi, dsb. Contohnya:

<div>{{ message.toUpperCase() }}</div>

Ungkapan di sini menukar nilai message kepada huruf besar dan kemudian mengeluarkannya kepada templat.

Sekatan pada ungkapan

Apabila menggunakan ungkapan, Vue.js mempunyai beberapa sekatan:

1. Anda tidak boleh menggunakan beberapa operasi JavaScript dengan kesan sampingan, seperti menggunakan console.log dan window.alert dsb. untuk nyahpepijat.
2. Ungkapan hanya boleh digunakan untuk mengira nilai dan tidak boleh digunakan untuk operasi seperti kawalan aliran, gelung dan pengendalian pengecualian.
3. Sintaks ES6, seperti fungsi anak panah dan rentetan templat, tidak boleh digunakan dalam ungkapan.

Penghadan ini disebabkan oleh fakta bahawa proses penilaian ungkapan Vue.js adalah berdasarkan fungsi eval JavaScript untuk memastikan keselamatan dan prestasi, Vue.js melakukan beberapa perkara untuk sekatan ungkapan.

Cara menggunakan ungkapan biasa

Selain output pembolehubah dan pengiraan mudah, ungkapan Vue.js juga mempunyai beberapa kegunaan biasa Berikut ialah beberapa:

Ungkapan Syarat

Dalam templat, kita selalunya perlu memutuskan kandungan yang hendak dipaparkan berdasarkan syarat tertentu Dalam kes ini, ungkapan bersyarat boleh digunakan. Ungkapan bersyarat Vue.js adalah serupa dengan pengendali bersyarat JavaScript ?.

Kod berikut akan memaparkan kandungan yang berbeza berdasarkan nilai isShow:

<div>{{ isShow ? '显示内容' : '隐藏内容' }}</div>

Paparan senarai

Terdapat arahan khas dalam Vue.jsv-for, boleh digunakan untuk menggelung melalui tatasusunan dan objek. Dalam traversal gelung, kita boleh menggunakan ungkapan untuk mendapatkan nilai elemen dan beroperasi pada elemen.

Sebagai contoh, kod berikut boleh digunakan untuk menggelungkan senarai dan mengeluarkan nilai setiap elemen:

<ul>
  <li v-for="item in list">{{ item }}</li>
</ul>

Panggilan fungsi

Dalam ungkapan, kita boleh memanggil Kaedah atau fungsi, dengan mengakses kaedah dalam contoh Vue, anda boleh mengendalikan beberapa logik perniagaan yang kompleks.

Contohnya:

<div>{{ formatDate(date) }}</div>

Di sini formatDate ialah kaedah dalam tika Vue yang boleh memformat masa ke dalam rentetan tertentu.

Penapis

Terdapat juga ciri yang sangat biasa digunakan dalam Vue.js: penapis. Penapis ialah fungsi yang boleh memformat data apabila output, dan boleh digunakan untuk memproses data yang perlu diformatkan.

Sebagai contoh, nilai message boleh ditukar kepada aksara besar dan dipintas dengan cara berikut:

<div>{{ message | uppercase | limit(10) }}</div>

Di mana, uppercase dan limit kedua-duanya adalah penapis tersuai peranti.

Ringkasan

Dalam Vue.js, ungkapan ialah konsep yang sangat penting yang boleh digunakan untuk mengendalikan output dan operasi data dalam templat. Apabila menggunakan ungkapan, anda perlu memberi perhatian kepada had Vue.js Anda tidak boleh melakukan beberapa operasi JavaScript dengan kesan sampingan, anda juga tidak boleh melakukan operasi seperti kawalan aliran, gelung dan pengendalian pengecualian. Selain output dan pengiraan pembolehubah mudah, ungkapan Vue.js juga boleh menggunakan fungsi seperti ungkapan bersyarat, paparan senarai, panggilan fungsi dan penapis.

Atas ialah kandungan terperinci Pengenalan terperinci kepada penggunaan ungkapan dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!