码迷,mamicode.com
首页 > 其他好文 > 详细

Vue进行表单操作的实例:单行文本输入框<input type='text'>

时间:2020-04-20 13:22:30      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:事件   nbsp   属性   code   NPU   简单   alt   http   操作   

 

一个简单的使用Vue来控制表单的案例,有一些小坑顺便也踩了

HTML代码部分:

<div id="app">
            <form action="">
                <span>姓名</span>
                <span><input type="text" v-model="uname"></span>
                <div>
                    <input type="submit" value="提交" @click.prevent="handle"><!-- vue中在click后加.prevent可以阻止标签原本的默认事件 -->
                </div>
            </form>
        </div>

JS代码部分:

var vm=new Vue({
            el:"#app",
            data:{
                uname:‘lisi‘
            },
            methods:{
                handle:function(){
                    console.log(this.uname);
                }
            }
        })

显示效果:

技术图片

 

几个知识点:

  1. vue中在click后加.prevent可以阻止标签原本的默认事件,在这个例子中提交按钮由于是submit类型的,所以默认在点击后会跳转到form标签里action属性指向的路径,在有了.prevent后就不会跳转

  2. 在vue实例里的methods里,指定的方法不可以用箭头函数,如果写成如下形式,则无法获取到实例里的this.uname,控制台输出的会是undefined
    handle:()=>{
            console.log(this.uname);
    }        

     

 

Vue进行表单操作的实例:单行文本输入框<input type='text'>

标签:事件   nbsp   属性   code   NPU   简单   alt   http   操作   

原文地址:https://www.cnblogs.com/huangjialin-27/p/12737072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!