MAC地址组件（vue）

最新推荐文章于 2025-04-24 15:07:32 发布

xxz15382177626

最新推荐文章于 2025-04-24 15:07:32 发布

阅读量2.3k

点赞数

文章标签： vue.js 前端 mac

本文链接：https://blog.youkuaiyun.com/lyx15382177626/article/details/121922858

版权

本文介绍如何在前端开发中运用Vue.js框架创建MAC地址组件。通过详细讲解组件代码和主页面的引用方式，展示最终实现的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <ul class="macAdress">
    <li v-for="(item, index) in macAddress">
      <input
        :id="`ul_disable_${index}`"
        :ref="`macInput_${index}`"
        v-model="item.value"
        type="text"
        class="macInputClass"
        @input="checkIpVal(item)"
        @keyup="turnIpPosition(item, index, $event)"
      />
      <div></div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    item: {
      type: Object,
    },
    disable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      macAddress: [
        {
          value: '',
        },
        {
          value: '',
        },
        {
          value: '',
        },
        {
          value: '',
        },
        {
          value: '',
        },
        {
          value: '',
        },
      ],
    };
  },
  watch: {
    macAddress: {
      // 双向数据绑定的value
      handler: function (newVal, oldVal) {
        let str = '';
        for (var i = 0; i < this.macAddress.length; i++) {
          str += this.formatter(this.macAddress[i].value) +