Question

看Vue文档，我不明白如何使用模板中已有的数据调用Vue中带有参数的函数。

例如，

JavaScript

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    methods: {
        reverse: function (word) {
            return word.split('').reverse().join('');
        }
    }
})

HTML

<div id="example">
    <p> {{ message }} </p>
    <p> {{ reverse( {{ message }} ) }} </p>
</div>

我知道HTML是错误的，但这与我要实现的目标类似。

Answer 1

@Jerodev的答案是正确的，这就是您想要的。

但是，对于您粘贴的代码段，可以使用computed property：

JS：

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
      reverse(){
        return this.message.split('').reverse().join('');
      }
    }
})

HTML：

<div id="example">
    <p> {{ message }} </p>
    <p> {{ reverse }} </p>
</div>

通过这种方式，代码更加高效，因为表达式被缓存了，并且可以说更加清晰了，因为您不需要使用html中的参数来调用该方法。

Answer 2

{{ }}之间的代码被解释为javascript，因此您可以将变量直接传递给函数：

<p> {{ reverse(message) }} </p>

Answer 3

如果您喜欢打字稿，可以这样写

import { Vue, Component } from 'vue-property-decorator';
@Component({name: 'test-component'})
export default class TestComponent extends Vue {
   private message: string = 'Hello';
   get reverse(): string {
     return this.message.split('').reverse().join('');
   }
}

在您的模板中

<div id="example">
    <p> {{ message }} </p>
    <p> {{ reverse }} </p>
</div>

如何在VueJS中使用参数调用函数？

3 个答案:

JS：

HTML：