• input中vmodel和value不能同时调用时解决方案


    <input type="text" v-model="keyWord"  value="请输入地名地址"  >

    当使用如上代码时,样式如下:

    输入框内并没有显示“请输入地名地址”字样,其原因是:

      v-model官方给出的说发是:这其实是一个简写的形式,v-model实际执行的是下面的绑定:

      <input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />

      v-model是动态绑定值到value,然后监听input的inpit事件获取值后赋给dataA的一个过程。

    因此默认的value不会显示,仅会在初始化渲染时短暂显示。

    当我们要实现这个效果时,需要用到 placeholder 。

    placeholder 这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari、IE)。

    <input type="text" v-model="keyWord"  placeholder="请输入地名地址">

    此时输入框出现字样。若想调整文字颜色,可使用下列代码:

      input::-webkit-input-placeholder{
                color:red;
            }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                color:red;
            }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                color:red;
            }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                color:red;
            }

    针对不同浏览器或不同版本的浏览器会有不同的写法,会添加相应的前缀。

    注意:

      1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是双冒号,写的时候还要带上input

      2、针对火狐浏览器则有两种写法,一种是针对低版本的,一种是针对高版本的,二者都需要带上-moz-前缀。要点1:火狐低版本的使用冒号(:),而高版本的使用双冒号(::);要点2:火狐浏览器不需要像webkit内核那样要带上input。

      3、由于placeholder属性只在IE10+才支持,因此,针对IE10、IE11的写法是加上-ms-前缀,使用的是冒号(:),需要带上input

  • 相关阅读:
    html5新增元素和废除元素
    html5本地存储
    第四章表单与文件笔记新增属性
    第五章canvas
    lable中for的作用
    第四章表单与文件学习内容
    第三章html5的结构
    html5的全局属性
    正则表达式—升华
    微前端
  • 原文地址:https://www.cnblogs.com/liuwei54/p/8939975.html
Copyright © 2020-2023  润新知