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);
   }