首页 > 其他 > 详细

vue的v-model指令

时间:2019-04-05 21:14:28      阅读:122      评论:0      收藏:0      [点我收藏+]

v-model指令用来绑定表单,数据传值。

技术分享图片

 

技术分享图片

如上,当在信息1输入框(表单)中输入值时,数据会对应变化;在信息2输入框中输入值时,数据并未变化。

  <div id="app">
        <form>
            <p>
                <input type="text" v-model="message1">
            </p>
            <p>
                <input type="text" v-model="this.message2">
            </p>
        </form>
        <p>
            {{ message1 }}
        </p>
        <p>
            {{ message2 }}
        </p>
    </div>

        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message1:"信息1",
                    message2:"信息2"
                }
            })
        </script>

技术分享图片

由于在信息2的input输入框中,v-model指令中使用了this.message,导入无法将表单与data中的数据进行绑定。

结论:使用v-model指令时,只需要v-model="message",data:{message:"信息1"}结合使用,即可实现表单与数据的双向绑定,在该文件中不论何处(methods中)this.message都可以得到该message的值。

vue的v-model指令

原文:https://www.cnblogs.com/5201314m/p/10659904.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!