hujung hadapan webView.jsPenjelasan terperinci tentang sintaks interpolasi Misai dan arahan v-bind dalam VuePenjelasan terperinci tentang sintaks interpolasi Misai dan arahan v-bind dalam Vue
Artikel ini akan memperkenalkan kepada anda sintaks interpolasi Misai dan arahan v-bind dalam Vue saya harap ia dapat membantu anda!
1. Sintaks interpolasi misai
⭐⭐sintaks misai: Ia bermaksud "janggut", Ia dikatakan bahawa ia adalah kerana teg terbenam kelihatan seperti janggut {{}} (saya tidak fikir ia kelihatan seperti O(∩_∩)O haha~)
Paparkan data dalam templat (template), yang paling banyak digunakan Sintaks ialah sintaks "Mustache" (kurung kurung berganda) interpolasi teks
- data Objek yang dikembalikan ditambahkan pada sistem responsif Vue; Mempelajari perkongsian video: tutorial video vue)
- Apabila data dalam data berubah, kandungan yang sepadan juga akan dikemas kini.
- Mustache bukan sahaja boleh menjadi atribut dalam data, tetapi juga ungkapan JavaScript
⭐⭐
Kita boleh menulis:
- Nilai
- Ungkapan
- Ungkapan Ternary
- Panggil fungsi dalam kaedah
<div id="app">
<h2 id="message">{{message}}</h2>
<h2 id="当前计数-counter">当前计数：{{counter}}</h2>
<!-- 2.表达式 -->
<h2 id="计数双倍-counter">计数双倍：{{counter*2}}</h2>
<h2 id="展示的信息-info-split-nbsp">展示的信息:{{info.split(" ")}}</h2>
<!-- 3.三元表达式 -->
<h2 id="age-成年人-nbsp-nbsp-未成年人">{{age>=18?"成年人" : "未成年人"}}</h2>
<!-- 4.调用methods中函数 -->
<h2 id="formatDate-time">{{formatDate(time)}}</h2>
</div>2. v- Sifat mengikat ikatan
2.1. Sifat asas pengikatan v-v
⭐⭐
V-bind pengikatan sehala : Data hanya boleh mengalir daripada data ke halaman
Kita boleh menggunakan v-bind untuk mengikat atribut, seperti mengikat secara dinamik atribut href bagi elemen a dan atribut src bagi elemen img
v-bind digunakan untuk
- mengikat satu atau lebih nilai sifat
- menyalurkan nilai prop kepada komponen lain** (props: bersamaan dengan input komponen , anda akan mempelajarinya kemudian)
v-bind:href boleh ditulis sebagai: href Ini adalah gula sintaksis v-bind
<div id="app">
<!-- 1.绑定img的src属性 -->
<button @click="switchImage">切换图片</button>
<img src="/static/imghwm/default1.png" data-src="showImgUrl" class="lazy" v-bind: alt="" />
<!--语法糖 v-bind: = : -->
<!-- 2.绑定a的href属性 -->
<a v-bind:href="href">百度一下</a>
</div>2.2 .v- kelas mengikat mengikat
⭐⭐
1 kelas mengikat asas
<h2 id="Hello-nbsp-World">Hello World</h2>
2 >
3. Penggunaan asas sintaks objek<button :class="isActive ? 'active':''" @click="btnClick"> 我是按钮 </button>4. Pasangan nilai kunci berbilang sintaks objek, kelas terikat secara dinamik boleh digunakan pada masa yang sama dengan kelas biasa
<button :class="{active:isActive}" @click="btnclick">我是按钮</button>Kita boleh memberikan v-bind:class objek untuk menukar kelas secara dinamik
- Sudah tentu, v-bind:class juga boleh wujud bersama dengan ciri kelas biasa
<button class="abc cba" :class="getDynamicClasses" @click="btnClick"> 我是按钮 </button>2.3.Gaya ikatan v-bind
⭐⭐
1. Penulisan html biasa
2 daripada<h2 id="hhh">hhh</h2>
gaya pengikatan dinamik dalam data, diikuti dengan jenis objek
3. Atribut pengikatan dinamik, atribut ini ialah objek<h2 id="hhhh">hhhh</h2>
<h2 id="hhhhh">hhhhh</h2>2.4 .v-bind nama atribut mengikat
⭐⭐Ikat nama atribut dalam data
Apabila nama atribut tidak tetap Gunakan: [property name] = "value"
<h2 id="Hello-nbsp-World">Hello World</h2>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
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌R.E.P.O. Tetapan grafik terbaik4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌Assassin's Creed Shadows: Penyelesaian Riddle Seashell2 minggu yang laluByDDDR.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌WWE 2K25: Cara Membuka Segala -galanya Di Myrise1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌Alat panas
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
Dreamweaver CS6
Alat pembangunan web visual
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
