ivew url 的输入

1. 

 <FormItem label="链接" prop="url">
        <Input v-model="formValidate.url">
          <Select v-model="select1" slot="prepend" style=" 80px">
            <Option value="http://">http://</Option>
            <Option value="https://">https://</Option>
          </Select>
          <Select v-model="select2" slot="append" style=" 70px">
            <Option value=".com">.com</Option>
            <Option value=".org">.org</Option>
          </Select>
        </Input>
      </FormItem>

2.

   select1: "",
      select2: "",
 formValidate: {
        bannerTitle: "",
        bannerText: "",
        bannerType: "",
        images: "",
        remarks: "",
        startDate: "",
        url: "",
        status:"0"
      },

3.调接口返回数据

   getBanner() {
      detailBanner(this.$route.params.bannerCode)
        .then(res => {
          this.formValidate.bannerCode = res.data.data.bannerCode;
          this.formValidate.bannerTitle = res.data.data.bannerTitle;
          this.formValidate.bannerText = res.data.data.bannerText;
          this.url = res.data.data.url;
          let urlHttps = this.url.slice(0, 5);   //https
          let urlHttp = this.url.slice(0, 4);    //http
          this.select2 = this.url.substr(-4);    //截取后4位字符串
          //进行判断,判断url 的头是http 还是https
          if (urlHttps == "https") { 
              //给左边的选择器赋值
              this.select1="https://";
              //给中间部分赋值
              var length = this.url.length-12;
              this.formValidate.url=this.url.substr(8,length)
          }else if (urlHttp == "http") {
             //给左边的选择器赋值
              this.select1="http://";
              var length1 = this.url.length-11;
              //给中间部分赋值
              this.formValidate.url=this.url.substr(7,length1);
          }
          this.formValidate.bannerType = res.data.data.bannerType + "";
          this.formValidate.startDate = res.data.data.startDate;
          this.value1=res.data.data.startDate;
          console.log(this.formValidate.startDate);
          this.formValidate.images = res.data.data.images;
          let im = res.data.data.images.split(",");
          im.map(imss => {
            this.uploadList.push({
              status: "finished",
              response: {
                data: {
                  url: imss
                }
              }
            });
          });
        })
        .catch(error => {
          this.$Message.error("请求失败!");
        });
    },
原文地址:https://www.cnblogs.com/guangzhou11/p/10831677.html