Vue.js中常用指令有哪些
Vue.js的指令是以v-开头，它们用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性。
Vue.js提供了一些内置指令，现在来介绍一下常用的内置指令。
v-if指令
v-if是条件渲染指令，它根据表达式的真假来添加或删除元素，它的基本语法：v-if = "expression"，expression是一个bool值的表达式，该表达式既可以是bool属性，也可以是一个返回bool的运算符，如以下代码：
渲染后的页面如下图：
通过控制台可以看到渲染的HTML代码中只包含这三个元素，如下图：
也可以在控制台上修改data属性的值，比如将yes的值改为false，即 vm.yes = false，那么页面中的Yes就会被删除，vm作为vue的实例，之所以可以直接访问data里的属性是因为每个vue实例都会代理其选项对象里的data属性。
记住：使用v-if指令时，只有表达式为真的元素才会被渲染，这是和下一个将要介绍的v-show指令的区别。
v-show指令
v-show指令也是条件渲染指令，刚刚也提到了v-if指令和v-show指令有一个区别，这个区别就是v-show指令的元素都会被渲染，只是表达式为假的元素会被设置css属性display:none，将其隐藏。如下图：
v-else指令
v-else指令必须跟在v-if指令或v-show指令后面，否则它无法被识别。
v-else指令的元素是否被渲染到HTML中主要看基于vue.js版本，如果是2.x版本，那么不管前面是v-if指令还是v-show指令，当前面指令为真时，v-else指令的元素都不会被渲染到HTML中，如果是1.x版本，取决于前面是v-if指令还是v-show指令；
当前面是v-if指令时，且该指令为真，则v-else指令就不会被渲染到HTML中；
当前面是v-show指令时，且该指令为真，v-else指令依然会被渲染到HTML中，只是会为其设置css属性display:none，将其隐藏；
v-for指令
v-for指令与javascript的遍历语法相似，即基于一个数组渲染一个列表，语法为：v-for = "item in items"，items为数组，item为被遍历的数组元素。如以
下代码：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<p id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
</tr>
</tbody>
</table>
</p>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
}) </script></html>View Code
v-bind指令
v-bind指令可以在后面带一个参数，用冒号隔开，这个参数一般是HTML元素的特性（attribute）,，例如：v-bind:class
如以下代码：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<p id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li>
</ul>
</p>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
}) </script></html>View Code
使用v-bind指令作用于元素的class上，为当前页设置css样式。
这里要注意的是遍历pageCount时，vue.js版本的不同会导致遍历的开始不同；
当版本为1.x时，遍历是从0开始的，一直到pageCount-1结束；
当版本为2.x时，遍历是从1开始的，一直到pageCount结束。
v-on指令
v-on指令用于监听DOM事件，它的用法与v-bind类似，例如监听点击事件：v-on:click="doSomething"
有两种形式调用方法：<1>绑定一个方法，即将事件指向方法的引用
<2>使用内联语句
如下代码：Greet按钮就是使用第一种方法，即将事件绑定到greet()方法，而Hi按钮直接调用say()方法
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<p><input type="text" v-model="message"></p>
<p>
<!--click事件直接绑定一个方法-->
<button v-on:click="greet">Greet</button>
</p>
<p>
<!--click事件使用内联语句-->
<button v-on:click="say('Hi')">Hi</button>
</p>
</p>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
}, // 在 `methods` 对象中定义方法
methods: {
greet: function() { // // 方法内 `this` 指向 vm
alert(this.message)
},
say: function(msg) {
alert(msg)
}
}
})
</script></html>View Code
v-bind与v-on的缩写方式
v-bind可以缩写为一个冒号，v-on可以缩写为一个@符号，如下：
Atas ialah kandungan terperinci Vue.js中常用指令有哪些. 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
1379
52
Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 pm 02:54 PM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.
WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata
Dec 17, 2023 pm 05:30 PM
WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket
Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata
Dec 17, 2023 pm 12:09 PM
Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan
Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 am 09:39 AM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.
Permainan manakah yang sesuai untuk bermain dengan grafik bebas i34150 dan 1G (permainan manakah yang sesuai untuk i34150)
Jan 05, 2024 pm 08:24 PM
Apakah permainan yang boleh dimainkan dengan i34150 dengan grafik bebas 1G. Bolehkah ia bermain permainan kecil seperti LoL? GTX750 dan GTX750TI adalah pilihan kad grafik yang sangat sesuai. Jika anda hanya bermain beberapa permainan kecil atau tidak bermain permainan, adalah disyorkan untuk menggunakan kad grafik bersepadu i34150. Secara umumnya, perbezaan harga antara kad grafik dan pemproses tidak begitu besar, jadi adalah penting untuk memilih kombinasi yang munasabah. Jika anda memerlukan memori video 2G, disyorkan untuk memilih GTX750TI jika anda hanya memerlukan memori video 1G, pilih sahaja GTX750; GTX750TI boleh dilihat sebagai versi GTX750 yang dipertingkatkan, dengan keupayaan overclocking. Kad grafik yang boleh dipasangkan dengan i34150 bergantung pada keperluan anda Jika anda bercadang untuk bermain permainan bersendirian, anda disyorkan untuk mempertimbangkan untuk menukar kad grafik. anda boleh memilih
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap
Dec 17, 2023 pm 05:13 PM
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami
Bagaimana untuk menggunakan insertBefore dalam javascript
Nov 24, 2023 am 11:56 AM
Penggunaan: Dalam JavaScript, kaedah insertBefore() digunakan untuk memasukkan nod baharu dalam pepohon DOM. Kaedah ini memerlukan dua parameter: nod baharu untuk dimasukkan dan nod rujukan (iaitu nod di mana nod baharu akan dimasukkan).
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
