uniapp input 输入邮箱，@符号前面得字符取消红色下划线

要取消@符号前面的字符的红色下划线，你可以在输入时判断输入的字符是否包含@符号，如果包含，则将@符号前后的字符分别包裹在两个span标签中，并将@符号去掉。其中，@符号前面的span标签需要设置text-decoration: none;来取消下划线样式。示例代码如下：

<template>
  <div class="parent">
    <input class="input" type="text" v-model="email" @input="onInput" placeholder="请输入邮箱地址">
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  methods: {
    onInput() {
      const email = this.email
      const atIndex = email.indexOf('@')
      if (atIndex > 0) {
        const prefix = email.substring(0, atIndex)
        const suffix = email.substring(atIndex + 1)
        const prefixHtml = `<span style="text-decoration: none;">${prefix}</span>`
        const suffixHtml = `<span>${suffix}</span>`
        this.email = prefixHtml + "@" + suffixHtml
      }
    }
  }
}
</script>

<style scoped>
.parent {
  position: relative;
}
.parent:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.input {
  position: relative;
  z-index: 2;
}
</style>

这样就可以实现在输入邮箱时，@符号前面的字符取消红色下划线的效果。