在Vue JS中截断并插入变量

Question

我是Vue的新手，并利用世界杯API构建一个简单的Laravel应用。我有以下代码：

this.engine.power

理想情况下应输出以下内容：

// Define Car constructor
const Car = function (engineInit) { 
    this.engine = engineInit;

    this.calculateSpeed = function () {
        return this.engine.power * 20;
    };
};

// Create new car instance
const carInstance = new Car({ power: 100 });

// Log the result of calculateSpeed function
console.log(carInstance.calculateSpeed());

但是我得到了一个错误，因为它没有在Laravel / Vue中正确解析<img src="http://www.countryflags.io/@{{ match.home_team.code | truncate(2) }}/flat/64.png"> 块。

这是截断过滤器，我试图使用重要的 - https://www.npmjs.com/package/vue-truncate-filter

例如，

<img src="http://www.countryflags.io/FR/flat/64.png"> 应该@{{ }}返回match.home_team.code，但我只需要FRA

实现我之后的最佳方式是什么？

Answer 1

您可以使用template literals并执行此操作：

<img :src="`http://www.countryflags.io/${match.home_team.code.substring(0, 2)}/flat/64.png`">

也可以使用过滤器，但我不确定。