<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>idv-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 messageDer 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!
