在之前使用過 AngularJS 之后，我開始熟悉 Vue.js，我想知道是否有任何方法可以繞過在 data { } 中顯式宣告每個資料屬性。
在 AngularJS 中，將 ng-model 宣告為 HTML 屬性就足夠了，當應用程式初始化時，它會將它們添加到作用域中，以便它們可以被讀取/操作。
我擔心的是我有一個技術計算器，我正在制作大約 100 個單獨的屬性，并且兩次宣告每個屬性似乎是多余的。
Vue 是否提供隱式獲取模型屬性而不在應用程式資料中顯式宣告它們？
示例 AngularJS 沒有在應用程式中顯式宣告模型屬性：
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="exampleApp" ng-controller="exampleController">
<input ng-model="firstName" ng-change="makeName()">
<input ng-model="lastName" ng-change="makeName()">
<input ng-model="fullName">
</div>
<script>
angular.module("exampleApp", []).controller("exampleController", function ($scope) {
$scope.makeName = function () {
$scope.fullName = $scope.firstName " " $scope.lastName;
}
});
</script>
Vue.js 中的應用程式或多或少是相同的：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="exampleApp">
<input v-model="firstName" v-on:input="makeName">
<input v-model="lastName" v-on:input="makeName">
<input v-model="fullName">
</div>
<script>
var app = new Vue({
el: '#exampleApp',
data: {
firstName: "",
lastName: "",
fullName: ""
},
methods: {
makeName: function () {
this.fullName = this.firstName " " this.lastName;
}
}
});
</script>
uj5u.com熱心網友回復：
是的，對于 HTML 模板中使用的任何“變數”，都必須在 JS 中宣告。
雖然當你有很多變數時這看起來很煩人，但它很重要，因為變數可以是許多反應性事物中的任何一種 - 簡單變數、計算屬性、方法等。 不可能知道要創建什么也沒有一些語法來指定應該創建什么型別的變數，或者指定任何默認值。
在您的示例中，fullName可能應該指定為computed屬性 - 例如：
computed: {
fullName: function () {
return this.firstName " " this.lastName;
}
}
這樣就不需要 v-on:input - 當firstName和lastName變數更新時，這將觸發fullName重新計算。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/339771.html
標籤：Vue.js
上一篇：Vue3如何傳遞可選的布爾道具？