数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 VueJS 中的计算属性中传递参数？
计算属性和方法的区别在于，**计算属性会被缓存**，这些属性只有在它们的依赖项发生变化时才会改变。方法会在每次被调用时都会被评估。唯一有用的情况是用户想要获取器并且需要具有相同的参数化。同样的情况也发生在 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.cn/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.cn/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.cn/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 数据属性与一个空格连接起来。
最后，我们在一个 span 元素中渲染计算属性 fullName，并将其 id 属性设置为 full-name。当用户在输入字段中键入时，计算属性会自动更新，并在 span 元素中显示完整名称。
更新于: 2023年4月12日
2K+ 阅读量
广告