Vue进⾏表单操作的实例：单⾏⽂本输⼊框inputtype=text
⼀个简单的使⽤Vue来控制表单的案例，有⼀些⼩坑顺便也踩了
HTML代码部分:
<div id="app">
<form action="">inputtypefile不上传文件
<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);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。