我可以在 Vue js 中对函数进行数据绑定吗？

Question

is it possible to data bind a function in Vue?

In the template I have something like: <title> {{nameofFunction()}}</title>

When I run it, it just says native function on the page.

Thanks.

Answer 1

There is also such thing as " computed property " in Vue, designed to do exactly this:

<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

yes you can. Could you share how are you defining your data options?

Here I have an example that works both in Vue2 and Vue3

<template>
  <div id="app">
    <h1>{{messageHelloFn()}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageHelloFn: (name = 'Lucas') => {
        return `Hello ${name}`
      }
    };
  }
};
</script>

Live example: 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>