如何在VueJS中传递参数到计算属性中

计算属性和方法的区别在于， 计算属性被缓存 ，这些属性仅在它们的依赖发生变化时才会改变。而方法每次调用时都会被重新评估。唯一有用的情况是当用户想要getter并且需要具有相同的参数化时。在vuex中也存在相同的情况。

示例

复制并粘贴以下代码片段到您的Vue项目中，并运行该Vue项目。您将在浏览器窗口中看到以下输出。

文件名 – app.js
目录结构 – $project/public – app.js

// Retrieving the computed properties from parameters
new Vue({
   el: '#container',
   data() {
      return {
         name: 'John',
         lastname: 'Wick'
      }
   },
   filters: {
      prepend: (name, lastname, prefix) => {
         return ` ${prefix}$ {name} ${lastname}`
      }
   }
});

文件名 – index.html
目录结构 — $project/public — index.html

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div style="text-align: center;">
         <h2> Passing Components in Computed Properties </h2>
      </div>
      <div id="container">
         <h3 style="text-align: center;">{{ name, lastname | prepend('Gracias ! ') }}!</h3>
      </div>
      <script src='app.js'></script>
   </body>
</html>

运行以下命令以获得下面的输出 −

C://my-project/ > npm run serve

完整的带有HTML的代码

现在让我们使用上面的app.js和index.html文件创建一个HTML文件。以下程序可以作为一个HTML文件运行。

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div style="text-align: center;">
         <h2> Passing Components in Computed Properties </h2>
      </div>
      <div id="container">
         <h3 style="text-align: center;">{{ name, lastname | prepend('Gracias ! ') }}!</h3>
      </div>
      <script>

         // Retrieving the computed properties from parameters
         new Vue({
            el: '#container',
            data() {
               return {
                  name: 'John',
                  lastname: 'Wick'
               }
            },
            filters: {
               prepend: (name, lastname, prefix) => {
                  return ` ${prefix}$ {name} ${lastname}`
               }
            }
         });
      </script>
   </body>
</html>

示例

下面的示例演示了如何在Vue.js中传递参数给计算属性。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Passing parameters to Computed Properties</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div id="app">
         <h2>Passing parameters to Computed Properties </h2>
         <div>
            <label for="first-name">First Name:</label>
            <input type="text" id="first-name" v-model="firstName">
         </div>
         <div>
            <label for="last-name">Last Name:</label>
            <input type="text" id="last-name" v-model="lastName">
         </div>
         <div>
            <label for="full-name">Full Name:</label>
            <span id="full-name">{{ getFullName('Hello') }}</span>
         </div>
      </div>
      <script>
         new Vue({
            el: '#app',
            data: {
               firstName: '',
               lastName: '',
            },
            computed: {
               getFullName: function () {
                  return function (prefix) {
                     return prefix + ' ' + this.firstName + ' ' + this.lastName;
                  }
               },
            },
         });
      </script>
   </body>
</html>

在这里，我们定义了两个数据属性 – firstName和lastName。这些属性使用v-model指令绑定到输入字段。

我们还定义了一个计算属性fullName，它将firstName和lastName数据属性连接起来，中间用一个空格隔开。

最后，我们将计算属性fullName呈现在一个带有id属性设置为full-name的span元素中。当用户在输入字段中输入时，计算属性会自动更新，并在span元素中显示全名。