Vue ist ein beliebtes Webentwicklungs-Framework, das syntaktischen Zucker für die bidirektionale Bindung bereitstellt. In Vue können wir die Daten auf der Seite problemlos abrufen und in Echtzeit auf deren Änderungen reagieren. In diesem Artikel wird untersucht, wie man Werte in Vue erhält.
Es gibt zwei Hauptmethoden, um Werte in Vue zu erhalten: Eine besteht darin, Anweisungen zu verwenden, und die andere darin, berechnete Eigenschaften zu verwenden.
Vue bietet einige Anweisungen zum einfachen Abrufen von Eingabe-, Auswahl- und anderen Werten auf der Seite.
Die V-Model-Direktive ist die am häufigsten verwendete Direktive zum Abrufen von Werten in Vue. Sie kann zum Binden des Werts eines Formulars verwendet werden Element und geben Sie es ein, wenn der Benutzer es eingibt. Aktualisieren Sie die Daten bei Bedarf automatisch. Im folgenden Code verwenden wir beispielsweise die V-Model-Direktive, um den Wert des Eingabefelds an das Nachrichtenattribut im Datenobjekt zu binden:
<div id="app">
<input v-model="message">
<p>{{ message }}</p>
</div>var app = new Vue({
el: '#app',
data: {
message: ''
}
})Jetzt, wenn Sie Text in die Eingabe eingeben In diesem Feld aktualisiert Vue automatisch den Nachrichtenattributwert in den Daten im Hintergrund und zeigt ihn im p-Tag an.
Die v-bind-Direktive kann verwendet werden, um ein oder mehrere Attribute in einer Vorlage dynamisch zu binden. Im folgenden Code verwenden wir beispielsweise v-bind, um das href-Attribut des a-Tags an das URL-Attribut im Datenobjekt zu binden:
<div id="app"> <a v-bind:href="url">Vue.js</a> </div>
var app = new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
})<div id="app">
<button v-on:click="increment">{{ count }}</button>
</div>var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment: function () {
this.count++
}
}
})<div id="app">
<input v-model="message">
<p>{{ reversedMessage }}</p>
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})<div id="app">
<input v-model="firstName">
<input v-model="lastName">
<p>{{ fullName }}</p>
</div>var app = new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})Das obige ist der detaillierte Inhalt vonSo erhalten Sie den Wert in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
