zoukankan      html  css  js  c++  java
  • vue v-model使用说明

    1、概述

    v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

    2、值绑定

    对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值):

    <!-- 当选中时,`picked` 为字符串 "a" -->
    <input type="radio" v-model="picked" value="a">
    
    <!-- `toggle` 为 true 或 false -->
    <input type="checkbox" v-model="toggle">
    
    <!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
    <select v-model="selected">
      <option value="abc">ABC</option>
    </select>

    3、修饰符

    (1)lazy

    在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg" >

    (2)trim

    如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

    <input v-model.trim="msg">
  • 相关阅读:
    ubuntu下安装常用软件合集
    Ubuntu16升级到18
    VScode安装教程
    查看系统信息脚本
    Excel应用笔记
    后缀数组
    笔记-AHOI2013 差异
    二分图
    动态规划dp
    笔记-CF1354E Graph Coloring
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8931493.html
Copyright © 2011-2022 走看看