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. 调整ceph的pg数(pg_num, pgp_num)

    https://www.jianshu.com/p/ae96ee24ef6c 调整ceph的pg数 PG全称是placement groups,它是ceph的逻辑存储单元.在数据存储到cesh时,先打 ...

  2. php对象转数组的函数

    关于php中想让对象以数组的形式访问,这时候就需要使用到get_object_vars()函数了.先来介绍一下这个函数. 官方文档是这样解释的: 1 array get_object_vars ( o ...

  3. Centos6.5在线配置安装Java环境与Tomcat环境

        书写此文一来记录环境,以便后期查看使用,Linux环境下配置centos与Java开发环境 本文环境:虚拟机系统centos6.5   链接工具:xshell脚本链接工具 一.安装Java开发 ...

  4. HDU6415 Rikka with Nash Equilibrium

    HDU6415 Rikka with Nash Equilibrium 找规律 + 大数 由于规律会被取模破坏,所以用了java 找出规律的思路是: 对于一个n*m的矩阵构造,我先考虑n*1的构造,很 ...

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

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

  6. CentOS7 - 安装 VirtualBox

    参考资料 最新的可用安装包可以从这里下载 VirtualBox 是 x86 硬件虚拟化产品,功能上与 VMware Server.KVM.及 Xen 类似,但是 VirtualBox 不修改 Linu ...

  7. 【SD系列】SAP SD模块-销售收入科目的配置

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD模块-销售收入科目的配置 ...

  8. simhash文本相似度比较

    simhash 在simhash中处理一个文本的步骤如下: 第一步,分词: 对文本进行分词操作,同时需要我们同时返回当前词组在文本内容中的权重(这基本上是目前所有分词工具都支持的功能). 第二步,计算 ...

  9. JUnit的基本使用

    一些关于单元测试的理念:    单元测试并不能证明你的代码是正确的,只能证明你的代码是没有错误的. Keep bar green and keep your code cool    关于JUnit的 ...

  10. sourcetree for mac 使用

    1.sourceTree clone 仓库 打开sourceTree, 点击 新仓库(1) -> 从url克隆(2), 如下图 如下图所示, 粘贴源url路径, 自动补全或者手动选择目标路径和名 ...