HTML 表单是个谜
[英] HTML forms are a mystery
本文介绍了HTML 表单是个谜的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在参加 Vue.js 课程，我刚刚了解了表单和管理它们(代码在下面).我不明白标签是如何工作的.它的值由选项值决定，选定的文本是该特定选项的文本?另外，当涉及到复选框和 Vue.js 时，我很困惑.为什么在复选框上使用 v-model 时复选框需要不同的值"?为什么我要创建一个复选框组(名称属性具有相同值的输入)?我真的不明白 v-model 如何与表单一起工作，我很乐意.预先感谢花时间帮助我的人.
代码
<form @submit.prevent="submitForm"><div class="form-control"><label for="user-name">您的姓名</label><input id="user-name";名称=用户名"类型=文本"v-model=用户名"/> <div class="form-control"><label for=age">您的年龄(岁)</label><输入id=年龄"名称=年龄"类型=数字"v-model.number=userAge"/>
<div class="form-control"><label for="referrer">您是如何得知我们的?</label><select id="referrer";名称=推荐人"v-model=引用者"><option value="google">Google</option><option value="wom">口碑</option><option value=newspaper">Newspaper</option></选择>{{ 推荐人}}
<div class="form-control"><h2>你对什么感兴趣?</h2><div><input id="interest-news";名称=兴趣"价值=新闻"类型=复选框"v-model=兴趣"/><label for="interest-news">News</label>
<div><input id="interest-tutorials";名称=兴趣"值=教程"类型=复选框"v-model=兴趣"/><label for="interest-tutorials">Tutorials</label>
<div><input id="interest-nothing";名称=兴趣"值=没有"类型=复选框"v-model=兴趣"/><label for="interest-nothing">Nothing</label>
<div class="form-control"><h2>你是如何学习的?</h2><div><input id="how-video";名称=如何"值=视频"类型=收音机"v-model=如何"/><label for="how-video">视频课程</label>
<div><input id="how-blogs";名称=如何"值=博客"类型=收音机"v-model=如何"/><label for="how-blogs">博客</label>
<div><input id="how-other";名称=如何"值=其他"类型=收音机"v-model=如何"/><label for=how-other">其他</label>
<div class="form-control"><输入类型=复选框"id="confirm-terms";name="confirm-terms";v-model=确认"><label for="confirm-terms">同意使用条款?</label>
<div><button>保存数据</button>
<div class="form-control"><选择></选择>
</表单></模板><脚本>导出默认{数据() {返回 {用户名:"，用户年龄:空，推荐人:报纸"，兴趣:[],方式:空，确认:假};},方法: {提交表格() {//console.log("用户名:" + this.userName);//this.userName = "";//console.log("用户年龄:");//console.log(this.userAge);//控制台日志(31);//this.userAge = null;//console.log("Referrer:" + this.referrer);//this.referrer = "wom";//console.log("复选框:");//console.log(this.interests);console.log(单选按钮");控制台日志(this.how)；this.interests = [];this.how = null;//console.log('确认?');//console.log(this.confirm);//this.confirm = false;},},};
解决方案
v-model 是 :value 和 的语法糖 >@change
代替
这里有一个例子，可能会有点麻烦.
const app = Vue.createApp({数据() {返回 {姓名: ""}}})app.component('自定义输入', {道具:['modelValue']，发出: ['update:modelValue'],模板:`<输入:值=模型值"@input="$emit('update:modelValue', $event.target.value)">`})app.mount("#app")
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></脚本><div id="应用程序"><custom-input :value="name" @update:model-value="v => name=v"></custom-input><br/><custom-input v-model="name"></custom-input><br/><input :value="name" @update:model-value="v => name=v"><br/><input v-model="name"><br/>姓名:{{姓名}}
v3 文档中的更多信息这里
I am taking a Vue.js course and I just learned about forms and managing them(the code is down below). I don't understand how does the tag work. It's value is determined by the option value and the selected text is the text of that specific option? Also, I am confused when it comes to checkboxes and Vue. Why do the checkboxes need different "value"s when you use v-model on that checkbox? Why would I want to create a checkbox group (inputs with the same value for the name attribute)? I don't really understand how v-model works with forms and I would love to. Thanks in advance for the person that's taking time to help me.
The Code
<template>
<form @submit.prevent="submitForm">
<div class="form-control">
<label for="user-name">Your Name</label>
<input id="user-name" name="user-name" type="text" v-model="userName" />
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
<input id="age" name="age" type="number" v-model.number="userAge" />
</div>
<div class="form-control">
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer" v-model="referrer">
<option value="google">Google</option>
<option value="wom">Word of mouth</option>
<option value="newspaper">Newspaper</option>
</select>
{{ referrer }}
</div>
<div class="form-control">
<h2>What are you interested in?</h2>
<div>
<input id="interest-news" name="interest" value="news" type="checkbox" v-model="interests"/>
<label for="interest-news">News</label>
</div>
<div>
<input id="interest-tutorials" name="interest" value="tutorials" type="checkbox" v-model="interests"/>
<label for="interest-tutorials">Tutorials</label>
</div>
<div>
<input id="interest-nothing" name="interest" value="nothing" type="checkbox" v-model="interests"/>
<label for="interest-nothing">Nothing</label>
</div>
</div>
<div class="form-control">
<h2>How do you learn?</h2>
<div>
<input id="how-video" name="how" value="video" type="radio" v-model="how"/>
<label for="how-video">Video Courses</label>
</div>
<div>
<input id="how-blogs" name="how" value="blogs" type="radio" v-model="how"/>
<label for="how-blogs">Blogs</label>
</div>
<div>
<input id="how-other" name="how" value="other" type="radio" v-model="how"/>
<label for="how-other">Other</label>
</div>
</div>
<div class="form-control">
<input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
<label for="confirm-terms">Agree to terms of use?</label>
</div>
<div>
<button>Save Data</button>
</div>
<div class="form-control">
<select></select>
</div>
</form>
</template>
<script>
export default {
data() {
return {
userName: "",
userAge: null,
referrer: "newspaper",
interests: [],
how: null,
confirm: false
};
},
methods: {
submitForm() {
// console.log("Username: " + this.userName);
// this.userName = "";
// console.log("User age: ");
// console.log(this.userAge);
// console.log(31);
// this.userAge = null;
// console.log("Referrer: " + this.referrer);
// this.referrer = "wom";
// console.log("Checkboxes: ");
// console.log(this.interests);
console.log("Radio Buttons");
console.log(this.how);
this.interests = [];
this.how = null;
// console.log('Confirm? ');
// console.log(this.confirm);
// this.confirm = false;
},
},
};
</script>
解决方案
v-model is syntactical sugar for :value and @change
Instead of <input v-model="name">, you could use
<input :value="name" @update:model-value="v => name=v"> which would have the same result.
Here is an example that perhaps belabors it a bit.
const app = Vue.createApp({
data() {
return {
name: ""
}
}
})
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
})
app.mount("#app")
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
<custom-input :value="name" @update:model-value="v => name=v"></custom-input><br />
<custom-input v-model="name"></custom-input><br />
<input :value="name" @update:model-value="v => name=v"><br />
<input v-model="name"><br />
Name: {{name}}
</div>
More info in v3 docs here
这篇关于HTML 表单是个谜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
