十五、Vue表单输入绑定

最新推荐文章于 2024-06-03 11:24:17 发布

凌枫zero

最新推荐文章于 2024-06-03 11:24:17 发布

阅读量241

点赞数 1

分类专栏： vue.js 文章标签： Vue.js的表单输入绑定 Vue.js Vue.js的单行文本绑定 Vue.js的下拉框绑定 Vue.js的数字绑定

本文链接：https://blog.csdn.net/qq_43674132/article/details/104879776

版权

vue.js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.Vue初体验：https://blog.csdn.net/qq_43674132/article/details/104857216

二.Vue条件命令：https://blog.csdn.net/qq_43674132/article/details/104857322

三.Vue循环指令：https://blog.csdn.net/qq_43674132/article/details/104857517

四.Vue处理用户输入：https://blog.csdn.net/qq_43674132/article/details/104857651

五.Vue组件初体验：https://blog.csdn.net/qq_43674132/article/details/104857870

六.Vue实例：https://blog.csdn.net/qq_43674132/article/details/104857953

七.Vue模板语法：https://blog.csdn.net/qq_43674132/article/details/104858009

八.Vue计算属性：https://blog.csdn.net/qq_43674132/article/details/104858068

九.Vue.js侦听器：https://blog.csdn.net/qq_43674132/article/details/104860083

十.Vue.js的class绑定：https://blog.csdn.net/qq_43674132/article/details/104861826

十一.Vue style绑定：https://blog.csdn.net/qq_43674132/article/details/104877107

十二.Vue 条件渲染：https://blog.csdn.net/qq_43674132/article/details/104877177

十三.Vue 列表渲染：https://blog.csdn.net/qq_43674132/article/details/104877393

十四.Vue事件处理：https://blog.csdn.net/qq_43674132/article/details/104878173

十五.Vue表单输入绑定：https://blog.csdn.net/qq_43674132/article/details/104879776

十六.Vue中引用图片：https://blog.csdn.net/qq_43674132/article/details/107043105

Vue表单输入绑定

基础用法

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

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

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

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

文本

<div id="app">
    <input type="text" v-model="message">
    <div>{{message}}</div>
</div>

image.png

多行文本

<textarea v-model="textarea" cols="30" rows="10"></textarea>
<p style="white-space: pre-line">{{textarea}}</p>

image.png

单个复选框

<input type="checkbox" value="多选" v-model="isRead">
<div>{{isRead}}</div>

效果如下图：

image.png

多个复选框

<input type="checkbox" value="足球" v-model="favorites">足球</input>
<input type="checkbox" value="篮球" v-model="favorites">篮球</input>
<input type="checkbox" value="爬山" v-model="favorites">爬山</input>
<input type="checkbox" value="玩游戏" v-model="favorites">玩游戏</input>
<div>{{favorites}}</div>

效果如下图：

image.png

单选按钮

 <input type="radio" value="男" v-model="gender">男 <input type="radio" value="女" v-model="gender">女
    <div>{{gender}}</div>

效果如下图：

image.png

下拉框

 <select v-model="edu">
        <option value="小学">小学</option>
        <option value="初中">初中</option>
        <option value="高中">高中</option>
    </select>
    <div>{{edu}}</div>

效果如下图：

image.png

下拉框多选

<select v-model="favorites" multiple>
        <option v-for="(f,index) in fs" v-bind:key="index" v-bind:value="f">{{f}}</option>
</select>

效果如下图：

image.png

值绑定

 <input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
    <div>{{toggle}}</div>

效果如下图：

image.png

详细代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的表单输入绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--普通文本-->
    <input type="text" v-model="message">
    <div>{{message}}</div>
    <hr>
    <!--多行文本-->
    <textarea v-model="textarea" cols="30" rows="10"></textarea>
    <p style="white-space: pre-line">{{textarea}}</p>
    <hr>
    <!--单个复选框-->
    <input type="checkbox" value="多选" v-model="isRead">
    <div>{{isRead}}</div>
    <hr>
    <!--多个复选框-->
    <input type="checkbox" value="足球" v-model="favorites">足球</input>
    <input type="checkbox" value="篮球" v-model="favorites">篮球</input>
    <input type="checkbox" value="爬山" v-model="favorites">爬山</input>
    <input type="checkbox" value="玩游戏" v-model="favorites">玩游戏</input>
    <div>{{favorites}}</div>
    <hr>
    <!--单选按钮-->
    <input type="radio" value="男" v-model="gender">男 <input type="radio" value="女" v-model="gender">女
    <div>{{gender}}</div>
    <hr>
    <!--下拉框-->
    <select v-model="edu">
        <option value="小学">小学</option>
        <option value="初中">初中</option>
        <option value="高中">高中</option>
    </select>
    <div>{{edu}}</div>
    <hr>
    <!--下拉框多选-->
    <select v-model="favorites" multiple>
        <option v-for="(f,index) in fs" v-bind:key="index" v-bind:value="f">{{f}}</option>
    </select>
    <hr>
    <!--值绑定-->
    <input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
    <div>{{toggle}}</div>
    <hr>
    <input type="text" v-model.lazy="message">
    <div>message</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"liqinggang",
            textarea:'',
            isRead:false,
            gender:'',
            favorites:[],
            edu:'小学',
            fs:[
                "足球",
                "篮球",
                "乒乓球"
            ],
            toggle:''
        }
        });
</script>
</body>
</html>

凌枫zero

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
十五、Vue表单输入绑定

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

扫一扫