zoukankan      html  css  js  c++  java
  • vue表单的用法

    你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。

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

    对于要求 IME (如中文、日语、韩语等) (IME 意为“输入法”)的语言,你会发现 v-model 不会在 ime 输入中得到更新。如果你也想实现更新,请使用 input 事件。

    文本

    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>

    Message is:

    多行文本

    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    Multiline message is:

    m kl


    在文本区域插值 (<textarea></textarea>) 并不会生效,应用 v-model 来代替。

    复选框

    单个勾选框,逻辑值:

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
     

    多个勾选框,绑定到同一个数组:

    <div id='example-3'>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    </div>
    new Vue({
    el: '#example-3',
    data: {
    checkedNames: []
    }
    })
          
    Checked names: []

    单选按钮

    <div id="example-4">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
    </div>
    new Vue({
    el: '#example-4',
    data: {
    picked: ''
    }
    })
      
      
    Picked:

    选择列表

    单选列表:

    <div id="example-5">
    <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
    </div>
    new Vue({
    el: '...',
    data: {
    selected: ''
    }
    })
     Selected: A

    如果 v-model 表达初始的值不匹配任何的选项,<select> 元素就会以”未选中”的状态渲染。在 iOS 中,这会使用户无法选择第一个选项,因为这样的情况下,iOS 不会引发 change 事件。因此,像以上提供 disabled 选项是建议的做法。

    多选列表 (绑定到一个数组):

    <div id="example-6">
    <select v-model="selected" multiple style=" 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>
    </div>
    new Vue({
    el: '#example-6',
    data: {
    selected: []
    }
    })
     
    Selected: [ "C" ]

    动态选项,用 v-for 渲染:

    <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
    </option>
    </select>
    <span>Selected: {{ selected }}</span>
    new Vue({
    el: '...',
    data: {
    selected: 'A',
    options: [
    { text: 'One', value: 'A' },
    { text: 'Two', value: 'B' },
    { text: 'Three', value: 'C' }
    ]
    }
    })
     Selected: C

    值绑定

    对于单选按钮,勾选框及选择列表选项,v-model 绑定的 value 通常是静态字符串 (对于勾选框是逻辑值):

    <!-- 当选中时,`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>

    但是有时我们想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。

    复选框

    <input
    type="checkbox"
    v-model="toggle"
    v-bind:true-value="a"
    v-bind:false-value="b"
    >
    // 当选中时
    vm.toggle === vm.a
    // 当没有选中时
    vm.toggle === vm.b

    单选按钮

    <input type="radio" v-model="pick" v-bind:value="a">
    // 当选中时
    vm.pick === vm.a

    选择列表的选项

    <select v-model="selected">
    <!-- 内联对象字面量 -->
    <option v-bind:value="{ number: 123 }">123</option>
    </select>
    // 当选中时
    typeof vm.selected // => 'object'
    vm.selected.number // => 123

    修饰符

    .lazy

    在默认情况下,v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

    <!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input v-model.lazy="msg" >

    .number

    如果想自动将用户的输入值转为 Number 类型 (如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:

    <input v-model.number="age" type="number">

    这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

    .trim

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

    <input v-model.trim="msg">
  • 相关阅读:
    形象理解ERP(转)
    禁用windows server 2008 域密码复杂性要求策略
    How to adding find,filter,remove filter on display method Form
    Windows Server 2008 R2激活工具
    How to using bat command running VS development SSRS report
    Creating Your First Mac AppGetting Started
    Creating Your First Mac AppAdding a Track Object 添加一个 Track 对象
    Creating Your First Mac AppImplementing Action Methods 实现动作方法
    Creating Your First Mac AppReviewing the Code 审查代码
    Creating Your First Mac AppConfiguring the window 设置窗口
  • 原文地址:https://www.cnblogs.com/fdxxiaobai/p/7704665.html
Copyright © 2011-2022 走看看