<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue基础扩展5--重置表单成默认值</title>
</head>
<body>
<!---
概述：vue 的data数据，会在vue创建后，绑定到options属性下，因此还原表单默认值可以使用
this.query = this.$options.data().query; 其中query为data下的表单数据等。
-->
<div id="app">
<form ref="formDom">
<div class="input_group">
<label for="username">用户名</label>
<input type="text" name="username" v-model="query.username">
</div>
<div class="input_group">
<label for="password">密码</label>
<input type="password" name="password" v-model="query.password">
</div>
<div class="input_group">
<label for="age">年龄</label>
<input type="text" name="age" v-model="query.age">
</div>
<div class="input_group">
<label>爱好</label>
<select v-model="query.hobby" >
<option v-for="(item,index) in items" :value="item">{
{item}}</option>
</select>
</div>
<input type="reset" value="原始重置">
<input type="button" @click="resetField" value="使用resetFields">
</form>
</div>
<script>
var vm = new Vue({
el:"#app",
data() {
return {
items:['java','js','sing'],
query:{
username:'root',
password:'123456',
age:'19',
hobby:'js',
}
}
},
methods: {
resetField() {
this.query = this.$options.data().query
}
},
});
</script>