标签:事件 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); } } })
显示效果:
几个知识点:
vue中在click后加.prevent可以阻止标签原本的默认事件,在这个例子中提交按钮由于是submit类型的,所以默认在点击后会跳转到form标签里action属性指向的路径,在有了.prevent后就不会跳转
handle:()=>{ console.log(this.uname); }
Vue进行表单操作的实例:单行文本输入框<input type='text'>
标签:事件 nbsp 属性 code NPU 简单 alt http 操作
原文地址:https://www.cnblogs.com/huangjialin-27/p/12737072.html