<template> <div :class="{ 'news-active': isActive }"> <ul> <li v-for="item in news">{{ item.title }}</li> </ul> </div> </template> <script> export default { data() { return { isActive: true, news: [ { title: 'Vue.js 3.0 发布了' }, { title: 'Vue 2.x 开发指南' }, { title: '使用 Vuex 管理应用状态' } ] } } } </script>
<div :class="{ 'news-active': isActive } ">
Verwenden Sie die Anweisung v-bind
, um einen dynamischen Klassenstil zu binden. Eine Änderung des isActive-Status aktualisiert class="news-active"
oder entfernt die Klasse. <div :class="{ 'news-active': isActive }">
用v-bind
指令绑定了一个动态的class样式。isActive状态的改变将会更新class="news-active"
或者移除该class。
isEnabled
的值来决定是否展示一段文本:
<template> <div> <p v-if="isEnabled">这段文本会在isEnabled为真时渲染</p> <p v-else>这段文本会在isEnabled为假时渲染</p> </div> </template> <script> export default { data() { return { isEnabled: true } } } </script>
isEnabled
为真时,第一个<p>
元素将会显示;然而,当isEnabled
为假时,第二个<p>
元素将会显示。这形成了一个很强大的条件语句。
display:none
来隐藏需要隐藏的DOM元素。
<p>例如,下面的代码展示了使用v-show指令的例子:
<template> <div> <p v-show="isVisible">这段文本会根据isVisible的值显示或者隐藏</p> </div> </template> <script> export default { data() { return { isVisible: true } } } </script>
isVisible
为真时,<p>
元素将会显示。当isVisible
为假时,<p>
元素仍然存在于DOM中,但是不可见。
news
数组中的每一项映射为一个DOM元素:
<template> <ul> <li v-for="item in news">{{ item.title }}</li> </ul> </template> <script> export default { data() { return { news: [ { title: 'Vue.js 3.0 发布了' }, { title: 'Vue 2.x 开发指南' }, { title: '使用 Vuex 管理应用状态' } ] } } } </script>
<li>
元素都通过v-for指令获取了一个新闻标题。
message
属性上:
<template> <div> <input v-model="message" /> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: 'Hello Vue!' } } } </script>
message
属性的初始值被渲染到一个<p>
元素中。然而,当在输入框中输入任何内容时,message
属性也会被更新。
click
事件到一个按钮上:
<template> <div> <button v-on:click="onClick">点击我</button> </div> </template> <script> export default { methods: { onClick() { console.log('Button clicked!') } } } </script>
onClick
方法会在按钮被点击时执行。
<p>除了click
事件,其他常见的DOM事件比如keydown
、submit
、mousemove
等都可以用v-on绑定。
<template> <ul> <li v-for="item in news" :key="item.id">{{ item.title }}</li> </ul> </template> <script> export default { data() { return { news: [ { id: 1, title: 'Vue.js 3.0 发布了' }, { id: 2, title: 'Vue 2.x 开发指南' }, { id: 3, title: '使用 Vuex 管理应用状态' } ] } } } </script>
id
v-if/v-else<p>Die Anweisungen v-if und v-else werden verwendet, um bedingte Anweisungen beim Rendern zu verwenden. <p>Zum Beispiel entscheidet der folgende Code basierend auf dem Wert von isEnabled
, ob ein Text angezeigt werden soll: 🎜rrreee🎜Wenn isEnabled
wahr ist, wird der erste < Das ;p>
-Element wird angezeigt; wenn isEnabled
jedoch false ist, wird das zweite <p>
-Element angezeigt. Dies bildet eine sehr leistungsfähige bedingte Anweisung. 🎜🎜v-show🎜🎜Der Befehl v-show ist dem Befehl v-if sehr ähnlich. Sie alle werden zum Ein- oder Ausblenden von DOM-Elementen verwendet. 🎜🎜V-show unterscheidet sich jedoch von v-if dadurch, dass es keine DOM-Elemente zerstört, die nicht angezeigt werden müssen. Im Gegenteil, v-show verbirgt lediglich die DOM-Elemente, die ausgeblendet werden müssen, über display:none
. 🎜🎜Zum Beispiel zeigt der folgende Code ein Beispiel für die Verwendung der v-show-Direktive: 🎜rrreee🎜In diesem Beispiel gilt, wenn isVisible
wahr ist, der <p>
Element wird angezeigt. Wenn isVisible
false ist, ist das Element <p>
immer noch im DOM vorhanden, aber unsichtbar. Die 🎜🎜v-for🎜🎜v-for-Direktive wird zum Rendern von Listendaten verwendet. Es durchläuft jedes Element der Datenquelle und generiert dann das entsprechende DOM-Element. 🎜🎜Zum Beispiel generiert der folgende Code eine Nachrichtenliste und ordnet jedes Element im Array news
einem DOM-Element zu: 🎜rrreee🎜In diesem Beispiel ist jeder < The ;li>-Elemente erhalten alle einen Nachrichtentitel durch die v-for-Direktive. 🎜🎜v-model🎜🎜Die V-Model-Direktive bindet Vue-Instanzdaten an Eingabekomponenten wie Formulareingaben, Kontrollkästchen und Optionsfelder. 🎜🎜Der folgende Code zeigt beispielsweise, wie V-Model den Inhalt eines Eingabefelds an die <code>message
-Eigenschaft einer Vue-Instanz bindet: 🎜rrreee🎜In diesem Beispiel message
Der Anfangswert des Attributs wird in ein <p>
-Element gerendert. Wenn jedoch etwas in das Eingabefeld eingegeben wird, wird auch das Attribut message
aktualisiert. 🎜🎜v-on🎜🎜Die v-on-Direktive wird verwendet, um DOM-Ereignisse an Methoden auf der Vue-Instanz zu binden, sodass diese Methoden ausgeführt werden können, wenn das Ereignis auftritt. 🎜🎜Der folgende Code zeigt beispielsweise, wie die v-on-Direktive ein click
-Ereignis an eine Schaltfläche bindet: 🎜rrreee🎜In diesem Beispiel wird die onClick
-Methode ausgeführt wenn auf die Schaltfläche geklickt wird. 🎜🎜Zusätzlich zum click
-Ereignis gibt es auch andere gängige DOM-Ereignisse wie keydown
, submit
, mousemove
usw . kann mit v-on-Bindung verwendet werden. 🎜🎜v-bind:key🎜🎜v-bind:key-Direktive wird verwendet, um Vue dabei zu helfen, die Rendering-Reihenfolge und Elementaktualisierungen von Listendaten zu identifizieren und dadurch die Rendering-Leistung zu verbessern. 🎜🎜Zum Beispiel verwendet der folgende Code die v-for-Direktive zum Rendern einer Nachrichtenliste und die v-bind:key-Direktive, um die ID des Listenelements dynamisch zu binden: 🎜rrreee🎜In diesem Beispiel der des Listenelements Das id
-Attribut ist an die v-bind:key-Direktive gebunden, um sicherzustellen, dass jedes Listenelement eine eindeutige Kennung hat. 🎜🎜Zusammenfassung: 🎜🎜Vues integrierte Anweisungen bieten Entwicklern eine Reihe praktischer DOM-Operationen und Datenrendering-Operationen. Die Kenntnis dieser Anweisungen erleichtert Entwicklern die Entwicklung hochwertiger Vue-Anwendungen. 🎜Das obige ist der detaillierte Inhalt vonLassen Sie uns über einige häufig verwendete integrierte Anweisungen in Vue sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!