Vue基础篇(六)

本教程分为三部分 : 基础 进阶 实战 ,深入浅出Vue.js
基础篇持续 更新中…

第六章 表单与v­-model

基本用法:
------- v-­model:

Vue提供了v­-model指令, 用于在表单类元素上双向绑定事件
一个小栗子

v-model:用法
{{value}}

效果图:

Vue基础篇(六)_第1张图片

效果图

inputtextarea
可以用于input框,以及textarea
注意: 所显示的值只依赖于所绑定的数据,不再关心初始化时的插入的value

 
v-model:用法
{{value}}


{{msg}}
单选按钮:
  1. 单个单选按钮,直接用v­-bind绑定一个布尔值,用v­-model是不可以的

  2. 如果是组合使用,就需要v-­model来配合value使用,绑定选中的单选框的value值,此处所绑定的初始值可以随意给.
    举个小栗子:

    v-model:用法
    {{value}}

    我是多行文本的初始化值
    {{msg}}

    单选框:
    单个单选框 :

    多个单选框
    狗蛋:
    毛蛋:
    翠花:
    现在选中的是--------->{{checkname}}
复选框:
  1. 单个复选框,直接用定一个布尔值,可以用v-­model可以用v­-bind
    2.多个复选框– 如果是组合使用,就需要v-­model来配合value使用,v-model绑定一个数组—如果绑定的是字符串,则会转化为true/false,与所有绑定的复选框的
    checked属性相对应.
    举个栗子:


    单选框:
    单个单选框 ----v-bind:

    多个单选框
    狗蛋:
    毛蛋:
    翠花:
    现在选中的是--------->{{checkname}}

    复选框:
    单个复选框-----v-bind
    单个复选框-----v-model

    多个复选框:
    毛蛋:
    狗蛋:
    翠花:
    现在选中的是---------{{checks}}
下拉框:
  • 如果是单选,所绑定的value值初始化可以为数组,也可以为字符串,有value直接优先匹配一个value值,没有value就匹配一个text

  • 如果是多选,就需要v­model来配合value使用,v-­model绑定一个数组,与复选框类似

  • v­-model一定是绑定在select标签上

    单选的下拉框: 狗蛋 毛蛋 翠花
    現在選中的是:{{selectde}}
    多选的下拉框: 狗蛋 毛蛋 翠花
    現在選中的是:{{selectdenull}}

小结一下 : 如果是单选,初始化最好给定字符串,因为v­-model此时绑定的是静态字符串或者布尔值,如果是多选,初始化最好给定一个数组.

绑定值

单选按钮
只需要用v-­bind给单个单选框绑定一个value值,此时,v­-model绑定的就是他的value
复选框
下拉框
select标签上绑定value值对option并没有影响
看例子

 
绑定值:
单选按钮 : -------{{picked}}
--------------------------------------
多选按钮:需求 选中不选中的value不一样
{{toggle}}
被选中:-{{toggle == value1}}
位被选中:--{{toggle == value2}}
--------------------------------------
下拉框: --------------现在选中的是{{typeof valueselect}} {{valueselect.num}}
--------------------------------------
修饰符
---------{{inputStr}}

---------{{inputStr}}
修饰符

lazy

  • ——v-­model默认是在input输入时实时同步输入框的数据,而lazy修饰符,可以使其在失去焦点或者敲回车键之后在更新

number

  • —————— 将输入 的字符串转化为number类型

trim
*trim自动过滤输入过程中收尾输入的空格
看栗子:

修饰符
---------{{inputStr}}
lazy:
---------{{inputStr}}
number :

---------{{typeof isnum}}
trim :

---------{{trimStr.split('').length}}

---------{{trimStr1.split('').length}}

你可能感兴趣的:(前端,vue.js,javascript,前端)