12.Vue 表单处理（值绑定）

最新推荐文章于 2022-08-04 20:17:02 发布

九宫格输入法

最新推荐文章于 2022-08-04 20:17:02 发布

阅读量267

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Stubborn_bull/article/details/118726227

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

对于单选按钮，复选框及选择框的选项，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>

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

复选框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no"/>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            toggle:''
        }
    });
</script>
</body>
</html>

这里的 true-value 和 false-value attribute 并不会影响输入控件的 value attribute，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(即“yes”或“no”)，请换用单选按钮。
在这里插入图片描述

单选按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no"/>
    <hr>
    <input type="radio" v-model="pick" :value="a">
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            ......
            a:'32423',
            pick:''
        }
    });
</script>
</body>
</html>

根据a的值变化
在这里插入图片描述

选择框选项：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
     ......
    <select v-model="selected">
        <!-- 内联对象字面量 -->
        <option :value="{ number: 123 }">123</option>
    </select>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            ......
            selected:null
        }
    });
</script>
</body>
</html>

动态绑定了一个对象
在这里插入图片描述

修饰符：

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

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

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

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

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

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

<input v-model.trim="msg">

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    ......
    <input v-model.lazy="msg" >
    <input v-model.number="age" type="number">
    <input v-model.trim="msg">
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            ......
            age:'',
            msg:'fdafsda    '
        }
    });
</script>
</body>
</html>