VueJS:计算辅助

I need to be able to convert a string (IP address) such as this 10.120.0.1 to a string (ISIS Network ID) such as this 49.0001.0101.2000.0001.00. The middle section 010 1.20 00.0 001 corresponds to the first string (I've spaced them out to show the IP address is inside it). You can see that there are 4 digits in each ISIS Network ID hextet that need to correspond to 3 digits in the IP Address octet. A number of 53 for example would have a leading 0 to make 3 digits.

All the IP addresses start with 10.120. so I just need to inject the last 2 octets from the IP Address into the ISIS Network ID.

I need this to be dynamic so when someone types in another ip address into a loopbackIP input, it automatically updates the isisNetworkID field.

我有这个:

49.0001.0101.{{ isisNetworkID }}.00

This needs to take the value from an input v-model="loopbackIP" that I have and translate the remaining values to sit in the middle of that isisNetworkID following this format - 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');
    }
});

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

评论
  • qet
    qet 回复

    我想我了解您要达到的目标。让我们将其分解为易于消化的部分。您的IP地址为:

    10.120.0.1
    

    您想要对其进行转换,以便将每个部分填充为3位数字:

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

    This can be done by splitting the string by the . character, and the using String.prototype.padStart(). We know that you don't need the first item in the array, so we can use Array.prototype.shift() to remove it. That leaves us with:

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

    Since the string should only contain 8 characters and the first character is already part of the template, we can use String.prototype.substring() to remove the first character from the first array item, so we end up with this:

    ['20', '000', '001']
    

    Then it is just a matter of joining this array back again, splitting it into 4 characters per item:

    ['2000', '0001']
    

    ...然后插回字符串。我在下面有一个概念验证示例,该示例应输出所需的字符串:

    const loopbackIP = '10.120.0.1';
    const parts = loopbackIP.split('.').map(x => x.padStart(3, '0'));
    
    // We don't need the first part
    parts.shift();
    
    // Remove first digit
    parts[0] = parts[0].substring(1, parts[0].length);
    
    const output = `49.0001.0101.${parts.join('').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'));
    
        // We don't need the first part
        parts.shift();
    
        // Remove first digit
        parts[0] = parts[0].substring(1, parts[0].length);
    
        // Rejoin, split into items of 4-character long, rejoin by period
        return parts.join('').match(/.{4}/g).join('.');
    });