HTML 表单是个谜

Posted 2023-02-22

【中文标题】HTML 表单是个谜

【英文标题】：HTML forms are a mystery

【发布时间】：2021-04-11 22:28:45

【问题描述】：

我正在学习 Vue.js 课程，我刚刚了解了表单和管理它们（代码在下面）。我不明白标签是如何工作的。它的值由选项值确定，所选文本是该特定选项的文本？另外，我对复选框和 Vue 感到困惑。当您在该复选框上使用 v-model 时，为什么复选框需要不同的“值”？为什么我要创建一个复选框组（名称属性具有相同值的输入）？我真的不明白 v-model 如何与表单一起工作，我很乐意。提前感谢花时间帮助我的人。

代码

<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 在每种情况下如何处理表单。我的意思是 Vue 对传递给指令的值做了什么

【参考方案1】：

v-model 是:value 和@change 的语法糖

您可以使用 <input v-model="name"> 代替

<input :value="name" @update:model-value="v => name=v"> 会产生相同的结果。

这里有一个例子，可能有点夸张。

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>

v3 文档中的更多信息here