时间戳

首页 > 解决方案 > VueJS：计算计算辅助

javascript - VueJS：计算计算辅助

问题描述

我需要能够将诸如 this 的字符串（IP 地址）转换为诸如 this10.120.0.1的字符串（ISIS 网络 ID）49.0001.0101.2000.0001.00。中间部分010 1.20 00.0 001对应于第一个字符串（我已将它们隔开以显示 IP 地址在其中）。您可以看到每个 ISIS 网络 ID 十六进制中有 4 位数字需要对应 IP 地址八位字节中的 3 位数字。例如，一个数字53将有一个前导0来制作 3 位数字。

所有 IP 地址都以开头，10.120.所以我只需要将 IP 地址的最后 2 个八位字节注入 ISIS 网络 ID。

我需要它是动态的，所以当有人在loopbackIP输入中输入另一个 IP 地址时，它会自动更新该isisNetworkID字段。

我有这个：

49.0001.0101.{{ isisNetworkID }}.00

这需要从v-model="loopbackIP"我拥有的输入中获取值，并将剩余的值转换为isisNetworkID遵循这种格式的中间值 - xxxx.xxxx。

我有这个计算的计算，但我不知道如何让 4 位数字等于 3 ......

const loopbackIP = '10.120.0.1';

const isisNetworkID = computed(() => {
    let idaho = '10.120.';

    if (loopbackIP.indexOf(idaho)) {
        return loopbackIP.slice(7);
    } else {
        console.log('Nothing is happening');
    }
});

我希望这是有道理的...

标签： javascriptvue.js

解决方案

我想我理解你想要达到的目标。让我们把它分解成可消化的部分。您的 IP 地址为：

10.120.0.1

并且您想对其进行转换，以使每个部分都填充为 3 位数字：

['010', '120', '000', '001']

这可以通过按.字符拆分字符串并使用String.prototype.padStart(). 然后我们将数组重新连接成一个字符串：

'010120000001'
 ||||
 ^^^^ -> to be deleted

我们知道前 4 位数字是不需要的，因为它已经是您模板的一部分，所以我们可以使用String.prototype.substring(4). 这给我们留下了：

'20000001'

现在只需将其拆分为每个项目 4 个字符：

['2000', '0001']

...并以.字符重新加入它：

'2000.0001'

...并将其插回字符串中。我在下面有一个概念验证示例，它应该输出所需的字符串：

const loopbackIP = '10.120.0.1';
const parts = loopbackIP.split('.').map(x => x.padStart(3, '0'));

// Remove the first 4 characters
let isisNetworkId = parts.join('');
isisNetworkId = isisNetworkId.substring(4);

const output = `49.0001.0101.${isisNetworkId.match(/.{4}/g).join('.')}.00`;
console.log(output);

所以如果你想把它翻译成你的 VueJS 代码，看起来应该没有什么不同：

const loopbackIP = '10.120.0.1';

const isisNetworkID = computed(() => {
    const loopbackIP = '10.120.0.1';
    const parts = loopbackIP.split('.').map(x => x.padStart(3, '0'));

    let isisNetworkId = parts.join('');
    isisNetworkId = isisNetworkId.substring(4);

    // Rejoin, split into items of 4-character long, rejoin by period
    return isisNetworkId.match(/.{4}/g).join('.');
});

推荐阅读