Vue 学习之 --- 双向绑定 v-model 用法

吾心流云

已于 2022-11-16 21:57:45 修改

阅读量340

点赞数

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

于 2022-11-16 21:25:36 首次发布

本文链接：https://blog.csdn.net/qq_33736036/article/details/127893233

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的v-model指令，用于实现表单元素的数据双向绑定。通过示例展示了在input、textarea和select等元素上的应用，并探讨了.number、.trim和.lazy等修饰符的用法，帮助开发者更高效地处理用户输入数据。

摘要由CSDN通过智能技术生成

双向绑定 v-model

vue 提供了v-model 双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据
注意：只有表单元素使用v-model才有意义, 常见的有表单元素: input,textarea,select

   <div id="app">
        <p> 用户名是:{{username}}</p>
        <!-- 数据双向绑定 -->
        <input type="text" v-model="username">
        <!-- 数据单向绑定 后续:value 不常用-->
        <input type="text" :value="username">
        <!-- select 演示 -->
        <select name="" id="" v-model = "city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
        </select>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                username:"zhangshan",
                city:'2'
            },
        })
    </script>

v-model 修饰符常用的有以下修饰符
.number 自动将用户的输入值转为数字类型
.trim 自动过滤用户输入的首尾空白字符
.lazy 在"change" 时而非"input"时更新

    <div id="app">
        <!-- v-model 修饰符   -->
        <!-- .number 自动将用户的输入值转为数字类型 -->
        <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2"> = <span>{{n1+n2}}</span>
        <hr>
        <!-- .trim 自动过滤用户输入的首尾空白字符 -->
        <input type="text" v-model.trim="username">
        <button @click="showName">获取用户名</button>
        <hr>
        <!-- .lazy 在"change" 时而非"input"时更新 -->
        <input type="text" v-model.lazy="username">
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                username:"zhangshan",
                city:'2',
                n1:1,
                n2:2
            },
            methods:{
                showName(){
                    console.log('用户名是"${this.username}"')
                }
            }
        })
    </script>