Vue学习笔记05表单输入绑定

最新推荐文章于 2024-07-24 14:58:19 发布

Jatine

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量178

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/asdfghjkl_zth/article/details/122530643

版权

前端专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

- Vue学习笔记05表单输入绑定
- - 基础用法

Vue学习笔记05表单输入绑定

基础用法

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>表单输入绑定</title>
</head>
<body>
<div id="app">

    <!--单向绑定-->
    <!--input type="text"/-->
    <!--用v-model实现双向绑定-->
    <input type="text" v-model="message"/>

</div>
    <script>
        var app = new Vue({
            //element的缩写，挂载元素
            el:"#app",
            data:{
                message:"Hello Vue"
            }
        })
    </script>
</body>
</html>

运行如图：
在这里插入图片描述
在text文本框里输入文本时，message显示会同步改变

选择框：

<!--选择框（添加代码）-->
    <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>

var app = new Vue({
            //element的缩写，挂载元素
            el:"#app",
            data:{
                message:"Hello Vue",
                selected:''
            }
        })

运行结果：
在这里插入图片描述

注意：
如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
<option disabled value="">请选择</option>

Jatine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记05表单输入绑定

文章目录Vue学习笔记05表单输入绑定基础用法Vue学习笔记05表单输入绑定基础用法可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意：v-model 会忽略所有表单元素的 value、checked、selected
复制链接

扫一扫

专栏目录