Vue进行表单操作的实例:单行文本输入框

 

一个简单的使用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);
   }