hujung hadapan web
View.js
Kaedah dan contoh menambah atribut secara dinamik menggunakan fungsi Vue.set
Kaedah dan contoh menambah atribut secara dinamik menggunakan fungsi Vue.set
Kaedah dan contoh menggunakan fungsi Vue.set untuk menambah sifat secara dinamik
Dalam Vue, jika kita ingin menambah sifat secara dinamik pada objek sedia ada, biasanya kita menggunakan fungsi Vue.set untuk mencapainya. Fungsi Vue.set ialah kaedah global yang disediakan oleh Vue.js, yang boleh memastikan kemas kini responsif apabila menambah sifat. Artikel ini akan memperkenalkan penggunaan Vue.set dan memberikan contoh khusus.
Pertama sekali, dalam Vue, kami biasanya menggunakan pilihan data untuk mengisytiharkan data reaktif. Sifat yang diisytiharkan dalam pilihan data akan dijejaki secara automatik oleh Vue.js untuk perubahan dan paparan akan dikemas kini secara automatik berdasarkan perubahan. Walau bagaimanapun, jika kami cuba menambah sifat baharu secara terus pada objek sedia ada, Vue tidak akan dapat mengesan perubahan itu, menyebabkan paparan tidak dikemas kini dengan betul. Pada masa ini, kita perlu menggunakan Vue.set dan bukannya kaedah penambahan atribut asli.
Penggunaan Vue.set sangat mudah Ia menerima tiga parameter: objek sasaran, nama atribut dan nilai atribut. Selepas memanggil fungsi Vue.set, Vue akan menambah sifat responsif pada objek sasaran dan memastikan paparan dikemas kini dengan betul. Sekarang, mari kita tunjukkan penggunaan Vue.set melalui contoh khusus.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.set示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="addProperty">添加属性</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
message: '原始属性'
}
},
methods: {
addProperty() {
Vue.set(this, 'newProperty', '新属性值');
}
}
})
</script>
</body>
</html>Tata Vue dalam contoh di atas mengisytiharkan objek data dan memulakan sifat mesej dalam data. Dalam halaman, kami memaparkan nilai atribut mesej dan menyediakan butang Apabila butang diklik, kaedah addProperty dipanggil.
Dalam kaedah addProperty, kami menggunakan fungsi Vue.set untuk menambahkan atribut newProperty secara dinamik pada contoh Vue, yang nilainya ialah "nilai hartanah baharu". Apabila kami mengklik butang, sifat baharu akan ditambahkan pada contoh Vue, dan perubahan akan dijejaki secara automatik oleh Vue supaya paparan dikemas kini dengan betul. Anda boleh melihat pada halaman bahawa nilai atribut baharu juga dipaparkan dengan betul.
Ringkasan
Menggunakan fungsi Vue.set boleh memastikan atribut yang ditambah secara dinamik akan dijejak dengan betul oleh Vue.js dan mengemas kini paparan. Dalam pembangunan sebenar, jika kita perlu menambah atribut secara dinamik pada objek, jangan gunakan kaedah penambahan atribut asli secara langsung Adalah disyorkan untuk menggunakan fungsi Vue.set. Ini memastikan pengemaskinian data yang responsif dan dengan itu pemaparan halaman yang betul.
Saya harap contoh mudah ini dapat membantu anda memahami dan menguasai penggunaan fungsi Vue.set. Dalam pembangunan sebenar, apabila menghadapi keperluan yang sama, anda boleh menggunakan fungsi Vue.set secara fleksibel untuk menambah atribut secara dinamik.
Atas ialah kandungan terperinci Kaedah dan contoh menambah atribut secara dinamik menggunakan fungsi Vue.set. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya
Mar 25, 2024 am 09:36 AM
Apabila mencipta mesin maya, anda akan diminta untuk memilih jenis cakera, anda boleh memilih cakera tetap atau cakera dinamik. Bagaimana jika anda memilih cakera tetap dan kemudian menyedari bahawa anda memerlukan cakera dinamik, atau sebaliknya. Anda boleh menukar satu kepada yang lain? Dalam siaran ini, kita akan melihat cara menukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya. Cakera dinamik ialah cakera keras maya yang pada mulanya mempunyai saiz kecil dan membesar dalam saiz semasa anda menyimpan data dalam mesin maya. Cakera dinamik sangat cekap dalam menjimatkan ruang storan kerana ia hanya mengambil sebanyak mungkin ruang storan hos seperti yang diperlukan. Walau bagaimanapun, apabila kapasiti cakera berkembang, prestasi komputer anda mungkin terjejas sedikit. Cakera tetap dan cakera dinamik biasanya digunakan dalam mesin maya
Bagaimana untuk menukar cakera dinamik kepada cakera asas pada Windows 11
Sep 23, 2023 pm 11:33 PM
Jika anda ingin menukar cakera dinamik kepada cakera asas dalam Windows 11, anda harus membuat sandaran terlebih dahulu kerana proses itu akan memadamkan semua data di dalamnya. Mengapa anda perlu menukar cakera dinamik kepada cakera asas dalam Windows 11? Menurut Microsoft, cakera dinamik telah ditamatkan dari Windows dan penggunaannya tidak lagi disyorkan. Selain itu, Windows Home Edition tidak menyokong cakera dinamik, jadi anda tidak akan dapat mengakses pemacu logik ini. Jika anda ingin menggabungkan lebih banyak cakera kepada volum yang lebih besar, kami mengesyorkan anda menggunakan Cakera Asas atau Ruang Storan. Dalam artikel ini, kami akan menunjukkan kepada anda cara menukar cakera dinamik kepada cakera asas pada Windows 11 Bagaimana untuk menukar cakera dinamik kepada cakera asas dalam Windows 11? pada permulaannya
Fungsi dir() Python: Lihat sifat dan kaedah objek
Nov 18, 2023 pm 01:45 PM
Fungsi dir() Python: Lihat sifat dan kaedah objek, contoh kod khusus diperlukan. Salah satu fungsi yang sangat berguna ialah fungsi dir(), yang membolehkan kita melihat sifat dan kaedah sesuatu objek. Artikel ini akan memperkenalkan penggunaan fungsi dir() dan menunjukkan fungsi serta penggunaannya melalui contoh kod tertentu. Teks: Fungsi dir() Python ialah fungsi terbina dalam.
Bagaimana untuk mencipta karusel imej dinamik menggunakan HTML, CSS dan jQuery
Oct 25, 2023 am 10:09 AM
Cara menggunakan HTML, CSS dan jQuery untuk mencipta karusel imej dinamik Dalam reka bentuk dan pembangunan tapak web, karusel imej ialah fungsi yang kerap digunakan untuk memaparkan berbilang imej atau sepanduk pengiklanan. Melalui gabungan HTML, CSS dan jQuery, kami boleh mencapai kesan karusel imej dinamik, menambahkan daya hidup dan daya tarikan pada tapak web. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta karusel imej dinamik yang ringkas dan menyediakan contoh kod khusus. Langkah 1: Sediakan persimpangan HTML
Apakah peranan atribut pageXOffset dalam JavaScript?
Sep 16, 2023 am 09:17 AM
Jika anda ingin mendapatkan piksel yang mana dokumen itu ditatal dari sudut kiri atas tetingkap, gunakan sifat pageXoffset dan pageYoffset. Gunakan pageXoffset untuk piksel mendatar. Contoh Anda boleh cuba menjalankan kod berikut untuk mengetahui cara menggunakan atribut pageXOffset dalam JavaScript - Demonstrasi Langsung<!DOCTYPEhtml><html> <head> <style> &
Menghuraikan teg SQL dinamik dalam MyBatis: pilih teg
Feb 24, 2024 pm 12:15 PM
SQL Dinamik ialah salah satu fungsi yang sangat penting dalam rangka kerja MyBatis Ia boleh menyambung dan memproses pernyataan SQL secara dinamik mengikut keadaan yang berbeza untuk mencapai operasi SQL yang fleksibel. Antaranya, teg pemilihan ialah teg utama dalam SQL dinamik, yang digunakan terutamanya untuk melaksanakan logik pemilihan bersyarat. Artikel ini akan meneroka penggunaan teg pilihan dalam MyBatis dan menyediakan contoh kod khusus untuk demonstrasi. 1. Sintaks asas teg pemilihan Terdapat dua bentuk utama teg pemilihan dalam MyBatis:
Cara melukis carta geografi dinamik dan interaktif dengan Python
Sep 28, 2023 pm 09:37 PM
Cara melukis carta geografi dinamik dan interaktif dengan Python Pengenalan: Dalam visualisasi data, carta geografi ialah alat biasa dan berkuasa yang boleh membantu kami memahami dengan lebih baik corak pengedaran spatial dan arah aliran dalam set data. Sebagai bahasa pengaturcaraan tujuan umum, Python mempunyai keupayaan pemprosesan data dan visualisasi yang berkuasa, dan juga boleh digunakan untuk melukis carta geografi yang dinamik dan interaktif. Artikel ini akan memperkenalkan cara menggunakan Python untuk melukis carta geografi dinamik dan interaktif, dan memberikan contoh kod khusus. 1. Persediaan untuk menggunakan Pytho
sintaks atribut bawah dalam CSS
Feb 21, 2024 pm 03:30 PM
Contoh sintaks atribut dan kod bawah dalam CSS Dalam CSS, atribut bawah digunakan untuk menentukan jarak antara elemen dan bahagian bawah bekas. Ia mengawal kedudukan elemen berbanding bahagian bawah elemen induknya. Sintaks atribut bawah adalah seperti berikut: elemen{bottom:value;} dengan elemen mewakili elemen yang gaya akan digunakan dan nilai mewakili nilai bawah yang akan ditetapkan. nilai boleh menjadi nilai panjang tertentu, seperti piksel
