上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]表单输入绑定

[复制链接]
  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    332

    主题

    2896

    帖子

    2908

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2908

    猫咪币纪念章

    发表于 2022-3-12 15:05:01 | 显示全部楼层 | 阅读模式

    前言

    我们这节课学习表单输入绑定,简单来说就是通过v-model来绑定输入框

    基础用法

    我们可以使用v-model指令来在input、textarea、select等元素上创建双向数据绑定

    v-model会根据控件的类型来判断选取正确的方法来绑定和更新数据

    v-model实际上是一个语法糖,负责监听用户输入事件来更新数据

    并在某种极端特殊场景下进行一些特殊处理

    PS:

    v-model实际上是value和input事件的组合

    一个负责绑定数据,一个负责接受事件并且再次设置数据

    但v-model与我们手写的事件主要区别就在于

    v-model还对输入法事件进行了一定的处理


    提示

    v-model会忽略表单元素的value checked selected属性的初始值

    它将始终将当前活动实例的数据作为该元素的数据来源

    所以如果我们想设置初始值,应该在组件的data选项内声明初始值


    v-model在内部会为不同的输入元素使用不同的属性并抛出不同的事件

    text和textarea元素会只用value属性以及input事件

    checkbox和radio使用check属性以及change事件

    select使用value属性以及change事件

    对于使用输入法,如中文日文韩文等语言

    会发现v-model不会在输入法阻止过程中进行更新

    如果也想响应这些更新,请适应input和value来代替v-model

    附注

    这里是因为v-model在compross输入法事件做了监听而且进行了专门的处理,让在输入法触发的过程中不会响应相应的更新

    文本

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

    多行文本

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

    插值在textarea中不起作用,所以要是用v-model来进行代替

    <!-- bad -->
    <textarea>{{ text }}</textarea>
    
    <!-- good -->
    <textarea v-model="text"></textarea>
    

    复选框

    单个复选框会绑定布尔值

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

    多个复选框,要绑定到同一个数组

    <div id="v-model-multiple-checkboxes">
      <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>
    
    Vue.createApp({
      data() {
        return {
          checkedNames: []
        }
      }
    }).mount('#v-model-multiple-checkboxes')

    单选框

    <div id="v-model-radiobutton">
      <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>
    
    Vue.createApp({
      data() {
        return {
          picked: ''
        }
      }
    }).mount('#v-model-radiobutton')

    选择框

    <div id="v-model-select" class="demo">
      <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    
    Vue.createApp({
      data() {
        return {
          selected: ''
        }
      }
    }).mount('#v-model-select')

    v-model表达式初始值未能匹配任何选项,select元素将渲染为未选中的状态

    在ios中,会使用户无法选择第一个选项,在这样的情况下,ios不会触发change选项

    因此最好提供一个空的禁用选项

    多选时绑定到一个数组

    Vue.createApp({
      data() {
        return {
          selected: ''
        }
      }
    }).mount('#v-model-select')

    v-for渲染的动态选项

    Vue.createApp({
      data() {
        return {
          selected: ''
        }
      }
    }).mount('#v-model-select')
    Vue.createApp({
      data() {
        return {
          selected: ''
        }
      }
    }).mount('#v-model-select')

    值绑定

    这里我也没太理解意思....

    对于单选按钮,复选框,以及选择框的选项

    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>
    

    有时候我们想把值绑定到一个动态数据上,这时候可以使用v-bind实现

    同时使用v-bind可以将输入值绑定为一个非字符串

    复选框

    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
    
    // 当选中时:
    vm.toggle === 'yes'
    // 当未选中时:
    vm.toggle === 'no'
    
    这里的话我也没太理解...有机会再修正
    这里的 true-value 和 false-value attribute 并不会影响输入控件的 value attribute,因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交,(即“yes”或“no”),请换用单选按钮。

    单选框

    <input type="radio" v-model="pick" v-bind:value="a" />
    

    选择框选项

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

    修饰符

    .lazy

    在默认情况下,每次input触发会与数据同步,可以添加lazy,变为change事件后进行同步

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

    .number

    将用户的输入转为数值类型,可以在v-model添加number修饰符

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

    如果这个值无法被parseFolat解析,则会返回原始的值

    .trim

    自动过滤前后空白字符,对v-model添加trim修饰符

    在组件上使用v-model

    HTML原生的输入元素类型并不总能满足需求

    Vue组件系统允许你创建并且具有自定义行为可复用的输入组件

    这些输入组件甚至可以和v-model一起使用

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表