我可以在Vue js数据绑定函数?

Question

是否可以在Vue中绑定一个函数?

在模板中，我有如下内容:<title> {{nameofFunction()}}</title>

当我运行它时，它只显示了页面上的本机函数

谢谢。

Answer 1

还有"computed property">

<template>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
export default {
data:() => ({
message: 'Hello'
}),
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
}
</script>

Answer 2

可以。你能分享一下你是如何定义你的数据选择的吗?

这里我有一个同时在Vue2和Vue3中工作的例子

<template>
<div id="app">
<h1>{{messageHelloFn()}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
messageHelloFn: (name = 'Lucas') => {
return `Hello ${name}`
}
};
}
};
</script>

实例:https://codepen.io/LucasFer/pen/abywRMW

Answer 3

a.js

const func = (str) => str
export default fn

<template>
<div id="app">
<div v-for="item in items">
{{ getTime(item) }}
</div>
<div>
{{ fn('a') }}
</div>
<div>
{{ func('b') }}
</div>
</div>
</template>
<script>
import func from './a.js'
export default {
data () {
return {
items: ['123123', '456456'],
fn: (str) => str
}
},
methods: {
getTime (v) {
return v + '123'
}
}
};
</script>