• elementUI vue v-model的修饰符


    v-model的修饰符

    1. v-model.lazy 只有在input输入框发生一个blur时才触发
    2. v-model.trim 将用户输入的前后的空格去掉
    3. v-model.number 将用户输入的字符串转换成number

    (1)input type=text

      当使用v-model将input输入框与name绑定那么输入框改变的同时name的值也会同步的发生改变

    <input type="text" v-model="name"><br />
    <span> {{ name }} </span>

      但是,这样会对使用有影响,所以我们可以用v-model的修饰符lazy,v-model.lazy 只有在input输入框发生一个blur时才触发

    <input type="text" v-model.lazy="name"><br />
    <span> {{ name }} </span>

    v-model.trim 将用户输入的前后的空格去掉,我们在输入框中输入很多空格后再输入内容,下面的span还是原来那样的,不会多出空格,原因是HTML只显示一个空格,但是name的值就不一样了,它会将这些空格算上,我们可以在span上加一个pre标签,这时这些空格就会显示出来

    <input type="text" v-model="name"><br />
    <pre><span> {{ name }} </span></pre>

      v-model.trim就是用来清除这些多余的空格的,当然如果是密码等输入框,请不要加此修饰,有些用户会用空格做密码。

    <input type="text" v-model.trim="name"><br />
    <pre><span> {{ name }} </span></pre>

    这时你无论给它前后加多少空格都会被清除掉。

    v-model.number 将用户输入的字符串转换成number
    <input type="text" v-model="age"><br />
    <span> {{ age }} </span>

    这种情况下,你输入的数字会被自动转换成字符串,可以在console中app.age来查看,如果加上.number

    <input type="text" v-model.number="age"><br />
    <span> {{ age }} </span>

      这样就会把你输入的数字转换成number,在console中app.age查看是number类型了。

    (2)input type=textarea

      v-model在input textarea select中使用,前面我们都是在input的type = text中使用的,在textarea中和它是一样的,唯一区别是这个是多行的。

    (3)input type=radio

    <!--你的性别是? -->
    男:<input v-model="sex" type="radio" value="male">
    女:<input v-model="sex" type="radio" value="famale">
      <br />
       <span> {{ sex }} </span>
    <!--这时选中哪个,sex的值就是其value-->

    (4)input type=checkbox

    <!--你的性取向是:-->
    男:<input v-model="sexual_orientation" type="checkbox" value="male">
    女:<input v-model="sexual_orientation" type="checkbox" value="famale">
       <br />
       <span> {{ sexual_orientation }} </span>
    <!--在多选时,要把data区中的v-model绑定的属性(sexual_orientation)设置成一个数组。-->     

    (5)select

    <!--你的家乡在哪?-->
    <select v-model="from" name="" id="">
    <option name="湖北" value="1">湖北</option>
    <option name="湖南" value="2">湖南</option>
    </select>
    <span>{{ from }}</span>
    <!--select中也可以多选
    你想去哪?-->
    <select v-model="from" name="" id="" multiple>
    <option name="湖北" value="1">湖北</option>
    <option name="湖南" value="2">湖南</option>
    <option name="湖南" value="3">河北</option>
    <option name="湖南" value="4">河南</option>
    </select>
    <span>{{ from }}</span>
    <!--和checkbox 一样请将data中的v-model绑定的那个属性(from)设置成一个数组-->
  • 相关阅读:
    Java基础总结--面向对象1
    Java基础总结--数组
    Java基础总结--方法(函数)
    Java基础总结--流程控制
    Java基础总结--变量、运算符总结
    Java基础总结--Java编程环境变量配置
    OpenWrt源码结构
    OpenWRT介绍
    内存管理
    makefie中的几种用法
  • 原文地址:https://www.cnblogs.com/yysbolg/p/9876276.html
Copyright © 2020-2023  润新知