1.

 <FormItem label="链接" prop="url">
<Input v-model="formValidate.url">
<Select v-model="select1" slot="prepend" style="width: 80px">
<Option value="http://">http://</Option>
<Option value="https://">https://</Option>
</Select>
<Select v-model="select2" slot="append" style="width: 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:""
},

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(, ); //https
let urlHttp = this.url.slice(, ); //http
this.select2 = this.url.substr(-); //截取后4位字符串
//进行判断,判断url 的头是http 还是https
if (urlHttps == "https") {
//给左边的选择器赋值
this.select1="https://";
//给中间部分赋值
var length = this.url.length-;
this.formValidate.url=this.url.substr(,length)
}else if (urlHttp == "http") {
//给左边的选择器赋值
this.select1="http://";
var length1 = this.url.length-;
//给中间部分赋值
this.formValidate.url=this.url.substr(,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("请求失败!");
});
},

ivew url 的输入的更多相关文章

  1. PHP解决搜索时在URL地址栏输入中文字符搜索结果出现乱码

    这 个问题的出现的前提是本站代码采用utf-8格式,php空间当页面停留在搜索页面时,在浏览器的地址栏输入中文的关键字进行搜索时会出现乱码,在网上查找资料说 明,是因为浏览器默认将url中的中文字符编 ...

  2. 简略描述:一个 url 从输入按下回车键,到页面展示出来,都经历了什么?

    首先,在输入网址按下回车以后,这个时候DNS服务器会通过当前的网址去解析网址的 ip: 在查找到真的 IP 以后,这个时候浏览器会向 web 服务器发起一个 tcp 连接请求(三次握手): 第一次:建 ...

  3. 电子邮件和URL输入控件

    HTML5还引入了让用户输入邮箱地址和URL的输入控件.那些不支持这类输入控件的浏览器会把他们当成普通文本框来处理. <!DOCTYPE html> <!-- To change t ...

  4. 输入一个URL到页面呈现其中发生的过程-------http过程详解

    在我们点击一个网址,到它能够呈现在浏览器中,展示在我们面前,这个过程中,电脑里,网络上,究竟发生了什么事情. 服务器启动监听模式 那我们就开始了,故事其实并不是从在浏览器的地址栏输入一个网址,或者我们 ...

  5. 计算机网络【6】—— 从浏览器输入URL到显示页面发生了什么

    当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染. 一.网络通信 互联网内各网络设备间的通信都遵循TCP ...

  6. 在浏览器输入URL后发生了什么?

    摘录部分一:https://www.cnblogs.com/kongxy/p/4615226.html 从输入URL到浏览器显示页面发生了什么 当在浏览器地址栏输入网址,如:www.baidu.com ...

  7. 在浏览器输入URL发生了什么

    在我们输入google.com之后,浏览器上很快就会呈现出谷歌的页面,本文简单介绍一下从URL的输入到浏览器页面的展示,这中间发生了些什么. URL是什么URL全名叫统一资源定位符,uniform r ...

  8. 一文摸透从输入URL到页面渲染的过程

    一文摸透从输入URL到页面渲染的过程 从输入URL到页面渲染需要Chrome浏览器的多个进程配合,所以我们先来谈谈现阶段Chrome浏览器的多进程架构. 一.Chrome架构 目前Chrome采用的是 ...

  9. 从 输入网址(URL)到页面展示的过程

    1.用户输入url网址(URL) 用户输入url(也就是我们说的网址,也是统一资源定义符,用于定义互联网资源) 比如输入https://www.baidu.com 其中https为协议 baidu.c ...

随机推荐

  1. 浅谈MySQL优化

    本文整理了一些MySQL的通用优化方法,做个简单的总结分享,旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作,至于具体的SQL优化,大部分通过加适当的索引即可达到效果,更复杂的就需要具体 ...

  2. Python分析《武林外传》

    我一向比较喜欢看武侠电影.小说,但是06年武林外传开播的时候并没有追剧,简单扫几眼之后发现他们都不会那种飞来飞去的打,一点也不刺激.09年在南京培训的时候,日子简单无聊透顶,大好的周末不能出门,只能窝 ...

  3. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  4. 判断逻辑 先判断协议字段返回,再判断业务返回,最后判断交易状态 API密钥

    [微信支付]微信小程序支付开发者文档 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_1 协议规则 商户接入微信支付, ...

  5. Vim 8.0 版本安装方法及添加Python支持

    利用Git安装 最简单也是最有效的方法 1. 获取Vim仓库: git clone https://github.com/vim/vim.git 2. 升级到最新的版本: cd vim git pul ...

  6. UML 类图快速入门

    UML 图形 官方定义 UML 类图(Class Diagram) UML 时序图(Sequence Diagram) 领域 UML 类图和实现 UML 类图 领域 UML 类图 实现 UML 类图 ...

  7. Vagrant 手册之 Provisioning - file 配置程序

    原文地址 Provisioner 命令:"file" 通过 file 配置程序可以上传宿主机的文件或目录到虚拟机中. 使用场景:将宿主机的 ~/.gitconfig 复制到虚拟机中 ...

  8. TensorFlow学习笔记3-从MNIST开始

    TensorFlow学习笔记3-从MNIST开始学习softmax 本笔记内容为"从MNIST学习softmax regression算法的实现". 注意:由于我学习机器学习及之前 ...

  9. 编程语言-Python-GUI

    PyQt5 import sys from PyQt5 import QtWidgets,QtCore app = QtWidgets.QApplication(sys.argv) widget = ...

  10. HTML DOM cursor 属性

    值 描述 url 需被使用的自定义光标的URL 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器设 ...