Vue.js 计算属性

在Vue.js中，当我们必须处理复杂的逻辑和运算时，将使用计算属性。计算属性就像方法一样，但有一些区别。

在前面的示例中，我们已成功使用模板内表达式。它们非常方便，但是模板内表达式主要用于简单操作。如果您必须在模板中添加沉重而复杂的逻辑，则它可能会肿且难以维护。

例如:

 <div id="example">
   {{ message.split('').reverse().join('') }}
 </div>

在这里您可以看到模板不像以前那样简单和声明性。它看起来更加复杂，您必须先仔细查看一下，然后才能意识到它以相反的方式显示消息。当您必须在模板中重复使用反向消息时，此问题可能会变得更加严重。

让我们举一些简单的示例来使计算属性的概念清晰易懂。这也使您能够决定何时使用方法以及何时使用计算属性。

请参阅以下示例以了解计算属性的概念:

Example1

index.html文件:

 <html>
    <head>
       <title>Vue.js Computed Property</title>
       <link rel="stylesheet" href="index.css">
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
      <div id="com_props">
   This is the Original message:<h2> {{ message }}</h2>
   This is the Computed reversed message: <h2> {{ reversedMessage }}</h2>
 </div>
       <script src="index.js"></script>
    </body>
 </html>

Index.js文件:

 var vm = new Vue({
   el: '#com_props',
   data: {
     message: 'Hello lidihuo'
   },
   computed: {
     // a computed getter
     reversedMessage: function () {
       // `this` points to the vm instance
       return this.message.split('').reverse().join('')
     }
   }
 })

我们使用一个简单的CSS文件使输出更具吸引力。

Index.css文件:

 html, body {
     margin: 5px;
     padding: 0;
 }

示例说明

在上面的示例中，我们声明了计算属性
reversedMessage 。这里提供的函数用作属性reversedMessage的获取函数。
reversedMessage 的值始终取决于
message 属性的值。

 data: {
     message: 'Hello lidihuo'
   },
   computed: {
     // a computed getter
     reversedMessage: function () {

示例2

再举一个示例。在此示例中，您可以在表单结构中输入数据并查看计算机属性的结果。请参见以下示例:

Index.html文件:

 <html>
    <head>
       <title>Vue.js Computed Property</title>
       <link rel="stylesheet" href="index.css">
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
      <div id = "com_props">
          FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
          LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
          <h2>My name is {{firstname}} {{lastname}}</h2>
          <h2>Retrieve name by using computed property : {{getfullname}}</h2>
       </div>
       <script src="index.js"></script>
    </body>
 </html>

Index.js文件:

 var vm = new Vue({
    el: '#com_props',
    data: {
       firstname :"",
       lastname :"",
       birthyear : ""
    },
    computed :{
       getfullname : function(){
          return this.firstname +" "+ this.lastname;
       }
    }
 })

我们使用一个简单的CSS文件使输出更具吸引力。

Index.css文件:

 html, body {
     margin: 5px;
     padding: 0;
 }

程序执行后，您将看到以下输出:

输出:

Vue.js 计算属性_https://bianchenghao6.com_【vue教程】_第1张

示例说明

在上面的示例中，我们创建了两个名为
名字和
姓氏。这些文本框使用属性
firstname 和
lastname 绑定。

现在，我们调用了计算方法getfullname，该方法返回输入的名字和姓氏。

 computed :{
    getfullname : function(){
       return this.firstname +" "+ this.lastname;
    }
 }

当我们在文本框中键入内容时，函数在属性的名字或姓氏更改后返回相同的值。因此，在计算的帮助下，我们不必做任何特定的事情，例如记住要调用一个函数。有了计算属性，它便会作为更改内部使用的属性(即名字和姓氏)本身被调用。

方法与计算属性之间的区别

在以上示例中，我们了解了计算属性。现在，让我们了解方法和计算属性之间的区别。我们知道这两个都是对象，并且内部定义了一些函数，这些函数返回一个值。

对于计算属性，对于方法，我们将其称为属性，对函数而言，将其称为函数。让我们看一个示例，了解方法和计算属性之间的区别。

Index.html文件:

 <html>
    <head>
       <title>Vue.js Computed Property</title>
       <link rel="stylesheet" href="index.css">
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
      <div id = "com_props">
          <h2 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h2>
          <h2>Random No from method: {{getrandomno1()}}</h2>
          <h2 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h2>
          <h2 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h2>
          <h2>Random No from method: {{getrandomno1()}}</h2>
       </div>
       <script src="index.js"></script>
    </body>
 </html>

Index.js文件:

 var vm = new Vue({
             el: '#com_props',
             data: {
                name : "helloworld"
             },
             methods: {
                getrandomno1 : function() {
                   return Math.random();
                }
             },
             computed :{
                getrandomno : function(){
                   return Math.random();
                }
             }
          })

让我们使用简单的
CSS 文件使输出更具吸引力。

Index.css文件:

 html, body {
     margin: 5px;
     padding: 0;
 }

程序执行后，您将看到以下输出:

输出:

Vue.js 计算属性_https://bianchenghao6.com_【vue教程】_第2张

示例说明

在上面的示例中，我们创建了一个名为
getrandomno1 和函数名称为
getrandomno 的计算属性。在此示例中，我们使用
Math.random()来获取随机数形式的结果。我们多次调用了方法和计算属性以查看其区别。

在这里，您可以看到，从计算属性返回的随机数每次都保持不变，而与被调用的次数无关。。这意味着每次调用它；最后一个值将全部更新。另一方面，对于方法来说，它是一个函数，因此每次调用它都会返回一个不同的值。