是否有可能在Vue.Js中传递计算属性中的参数。我可以看到,当有getter /setter使用computed时,他们可以接受一个参数并将其分配给一个变量。比如这里的文档:
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
这也是可能的吗:
computed: {
fullName: function (salut) {
return salut + ' ' + this.firstName + ' ' + this.lastName
}
}
其中computed属性接受一个参数并返回所需的输出。然而,当我尝试这样做时,我得到这个错误:
vue.common.js:2250 Uncaught TypeError: fullName不是函数(…)
我是否应该在这种情况下使用方法?
[Vue2]过滤器是Vue组件提供的一种功能,允许您对模板动态数据的任何部分应用格式和转换。
它们不会改变组件的数据或任何东西,但只会影响输出。
假设你正在打印一个名字:
新Vue ({
埃尔:“#容器”,
数据(){
返回{
名称:“玛丽亚”,
姓:“席尔瓦”
}
},
过滤器:{
Prepend: (name, lastname, prefix) => {
返回' ${prefix} ${name} ${lastname} '
}
}
});
< script src = " https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js " > < /脚本>
< div id = "容器" >
<p>{{name, lastname | prepend('Hello')}}!< / p >
< / div >
请注意应用筛选器的语法,即| filterName。如果您熟悉Unix,那就是Unix管道操作符,用于将一个操作的输出作为输入传递给下一个操作。
组件的filters属性是一个对象。
单个过滤器是接受一个值并返回另一个值的函数。
返回值是Vue.js模板中实际打印的值。
在Vue3中删除了过滤器
Computed可以被认为是一个函数。举个关于验证的例子,你可以这样做:
methods: {
validation(attr){
switch(attr) {
case 'email':
const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
return re.test(this.form.email);
case 'password':
return this.form.password.length > 4
}
},
...
}
你会这样使用:
<b-form-input
id="email"
v-model="form.email"
type="email"
:state="validation('email')"
required
placeholder="Enter email"
></b-form-input>
请记住,您仍然会错过特定于computed的缓存。
也可以通过返回函数将参数传递给getter。当你想查询存储中的数组时,这特别有用:
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
注意,通过方法访问的getter将在每次调用时运行,并且结果不会被缓存。
这被称为方法风格访问,它被记录在Vue.js文档中。