6. Vue 修饰符
可用于阻止表单提交
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<!--修饰符用于指出一个指令应该以特殊方式绑定。
这里的.prevent修饰符告诉 v-on指令对于触发的事件调用js的 event.preventDefault()
即阻止表单提交的默认行为-->
<form action="save" v-on:submit.prevent="onFormSubmit()">
<input type="text" name="name" v-model='user.name'/>
<input type="submit" value="提交" />
</form>
</div>
<script>
new Vue({
el: "#app",
data:{
user:{}
},
methods: {
onFormSubmit() {
if(this.user.name!=null){
console.log('提交表单')
}else{
alert("请输入用户名")
}
}
}
})
</script>
</body>