【vue】关于实时获取input值的三种方法

最新推荐文章于 2023-11-17 17:25:43 发布

北向珉

最新推荐文章于 2023-11-17 17:25:43 发布

阅读量3.2k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_44897899/article/details/121019350

版权

学习中专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue.js中实现双向数据绑定的三种方式：第一种是基础的v-model语法；第二种使用v-bind和v-on分别绑定value和处理input事件；第三种则是简化的@input事件监听结合:value直接更新message。每种方法都详细解释了其工作原理和代码实现，帮助读者深入理解Vue的数据绑定机制。

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

仅用于学习记录。视频：VUE学习

第一种

<div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })
    </script>

input中使用v-model，用它绑定了message，实时将输入的内容传递给data里的message，然后data里的message传到{{message}}

第二种

//v-bind精简成:      v-on:精简成@
//    :value="message"         @valueChange
<div id="app">
    <input type="text" v-bind:value="message" v-on:input="valueChange">
    <h2>{{message}}</h2>
</div>
<script src="vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'hello'
            },
            methods:{
                //在界面上产生一个事件后，浏览器生成一个事件对象
                //                          （包含正在改变的事件信息）
                valueChange(event){
                //此时发生的目标事件的值赋给data:message
                //动态绑定时刻改变的data:message，在input里用:value="message"
                    this.message=event.target.value
                }
            }
        })
    </script>

v-bind绑定一个value属性，v-on指令给当前元素绑定input事件（当输入input的时候同时会发生）

第三种

@input 用于监听事件只要输入的值变化了就会触发input

<div>
    <input type="text" :value="message" @input="message=$event.target.value">
        <h2>{{message}}</h2>
</div>
<script src="vue.js"></script>
<script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'hello'
            },
</script>