时间戳

首页 > 解决方案 > 是否总是需要在数据中声明属性：{ }

vue.js - 是否总是需要在数据中声明属性：{ }

问题描述

在之前使用过 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>

标签： vue.js

解决方案

是的，对于 HTML 模板中使用的任何“变量”，都必须在 JS 中声明。

虽然当你有很多变量时这看起来很烦人，但这很重要，因为变量可以是许多反应性事物中的任何一种——简单变量、计算属性、方法等。不可能知道要创建什么也没有一些语法来指定应该创建什么类型的变量，或者指定任何默认值。

在您的示例中，fullName可能应该将其指定为computed属性-例如：

computed: {
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

这样就不需要 v-on:input - 当firstName和lastName变量更新时，这将触发fullName重新计算。

推荐阅读