Vue教程0208-表单输入绑定

watchping

已于 2023-02-12 10:00:14 修改

阅读量301

点赞数

分类专栏：前端Vue教程 # Vue基础文章标签： javascript vue.js 前端

于 2023-02-11 17:17:34 首次发布

本文链接：https://blog.csdn.net/watchping/article/details/128985739

版权

前端Vue教程同时被 2 个专栏收录

10 篇文章 3 订阅

订阅专栏

Vue基础

8 篇文章 0 订阅

订阅专栏

表单输入绑定

1.指令v-model-双向绑定
2.文本框和文本域
3.单选按钮radio
4.选择框select
5.检测框checkbox

1.指令v-model-双向绑定

一、数据双向绑定

单向绑定: 只能将data中的变量值，自动同步更新到HTML页面中。但是，页面上的修改，无法自动更新回data的变量中。
双向绑定: 既能将data中的变量值，自动同步更新到HTML页面中。又能将页面上的修改自动更新回data的变量中。
何时使用双向绑定: 只有绑定表单元素时，才有必要用双向绑定！因为只有表单元素，用户才能在页面上修改的它的内容。

二、指令v-model-双向绑定

<input v-model="变量"/>

你可以用 v-model 指令在表单、及元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。

它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model可自动根据所在的元素不同，选择对应的的元素自动绑定。

官网学习
表单输入绑定 https://cn.vuejs.org/v2/guide/forms.html

2.文本框和文本域

用法：

<input v-model="变量"/>
<textarea v-model="变量"></textarea>

自动绑定value属性。

案例
输入框动态监测，回车执行搜索按钮功能。实现代码参考：

<body>   
    <div id="app">
        <!--在文本框上按回车可以查找-->
        <input type="text" v-model="keywords" @keyup.enter="onEnterKeyUp()" />
        <!--点击按钮可以查找-->
        <button @click="onSearch">搜索</button>
        <div>查找的关键字：{{keywords}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                keywords: "macbook i5",
            },
            methods: {
                onSearch() {
                    console.log(`查找 ${this.keywords} 相关的内容...`);
                },
                onEnterKeyUp() {
                    console.log(`触发了回车键...`);
                    //调用对应的函数
                    this.onSearch();
                },
            },
            //想变量keywords只要被更改，就重新执行一次搜索
            watch: {
                keywords() {
                    console.log("自动调用一次watch中的keywords函数...");
                    this.onSearch();
                },
            },           
        });
    </script>
</body>

注意
事件监听@keyup.enter 参见 https://cn.vuejs.org/v2/guide/events.html#按键修饰符。

思考：
代码中访问属性keywords、方法onSearch，前面为什么要加this?

进入new Vue()中的一切data:{}, methods:{}, watch:{}都会被打散，最终都直接隶属于new Vue()对象，都是平级的，所以必须加this进行访问。

官网学习
https://cn.vuejs.org/v2/guide/forms.html#文本

3.单选按钮radio

用法：

<input type="radio" name="sex" value="1" v-model:checked="变量">男</input>
<input type="radio" name="sex" value="0" v-model:checked="变量">女</input>

绑定的是checked属性。

用checked绑定的变量的值和当前radio的value做比较。如果checked绑定的值和value值相等，则当前radio选中。否则不选中。

切换选中一个radio后，用当前选中的radio的value值代替checked属性绑定的data中的变量值。导致页面中其它关注这个变量的位置都自动发生改变。

案例- 选择性别，参考代码：

<body>
    <!-- 单选按钮 -->
    <div id="app">
        <input type="radio" :value="1" v-model="sex">男</input>
        <input type="radio" :value="0" v-model="sex">女</input>
        <h1>sex:{{sex}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                sex: 1,
            },
        });
    </script>
</body>

官方文档
https://cn.vuejs.org/v2/guide/forms.html#单选按钮

4.选择框select

用法：

    <select v-model:value="变量">
        <option value="值1">文本1</option>
        <option value="值2">文本2</option>
        ... ...
    </select>

绑定的是value属性。

用value绑定变量值，和每个option的value做比较，哪个option的value等于变量值，就选中哪个option。

切换select中的选中项，用新选中的option的value值替换select的value绑定的data中的变量值。导致所有绑定这个变量的页面其它位置自动变化。

案例-选择订单状态。代码参考如下：

<body>
  <div id="app">
    <!-- 选择框 -->
    <select v-model="orderStatus" style="height:30px">
      <option :value="0">未付款</option>
      <option :value="1">已付款</option>
      <option :value="2">已发货</option>
      <option :value="3">已签收</option>
    </select>
    <h1>orderStatus:{{orderStatus}}</h1>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        //0:未付款  1:已付款  2:已发货 3:已签收
        orderStatus: 1,
      },
    });
  </script>
</body>

练习：用数组和v-for渲染上述案例中的select元素

官方文档参考
https://cn.vuejs.org/v2/guide/forms.html#选择框

5.检测框checkbox

用法：

    <input type="checkbox" v-model="变量">

绑定checked属性。

根据变量是true还是false，设置当前checkbox是否选中。

当切换checkbox的选中状态后，就用新的checked属性值(true或false)，更新到绑定的data中的变量中。

案例-注册时设置同意选项，同意启用表单元素，不同意，则禁用表单元素。参考代码如下：

<body>
    <div id="app">
        <input type="text" placeholder="请输入用户名"><br />
        <input type="password" placeholder="请输入密码"><br />
        <label><input type="checkbox" v-model="isAgree">同意</label></br>
        <button :disabled="!isAgree">注册</button>
        <h1>isAgree:{{isAgree}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isAgree: false //表示不同意
            }
        })
    </script>
</body>