Vue中v-model的多种使用方式-妙用小技巧

最新推荐文章于 2024-08-08 17:20:54 发布

JackieDYH

最新推荐文章于 2024-08-08 17:20:54 发布

阅读量1.7k

点赞数

分类专栏： Vue JavaScript 编码小技巧文章标签： v-model vue js 数据双向绑定修饰符

本文链接：https://blog.csdn.net/JackieDYH/article/details/118615890

版权

编码小技巧同时被 3 个专栏收录

66 篇文章 2 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

JavaScript

372 篇文章 55 订阅

订阅专栏

Vue

336 篇文章 80 订阅

订阅专栏

本文详细探讨Vue的v-model指令，包括它如何实现数据双向绑定，以及在radio、checkbox、select等场景的应用。同时，介绍了修饰符lazy、number和trim的使用，如lazy修饰符在失去焦点后更新数据，number修饰符转换为数字类型，trim修饰符去除输入两侧空格。

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

v-model

<div id="app">
    <input type="text" v-model="num">
    <input type="text" :value="num" v-on:input="num=$event.target.value">
    <h2>{
  {num}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:'hello',
        }
    })
</script>