Create a VUE project

  • A folder has been created and can be run directly within the foldervue create .
  • Select the configuration
  • yarn serve

Form input binding

  • You can usev-modelInstruction in form<input>,<textarea> 及 <select>Creates a bidirectional data binding on the element. It automatically selects the correct method to update the element based on the control type. It’s kind of amazing, butv-modelIt’s essentially grammar sugar. It listens for user input events to update data and performs special processing for extreme scenarios.

1. Single-line text

  • Insert the form in template
  • In data statementmessage
<template>
  <div id="app">
    <input v-model="message" placeholder="edit me" />
    <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'hi',
    };
  },
  components: {},
};
</script>
Copy the code
  • The user can change the pagemessagevalue
  • Change through memorymessageAdded value,clickEvents, 👇

2. Multi-line texttextarea

  • Only need toinputStamp:textarea

3. A single check box

4. Multiple check boxes

5. Multiple check boxes are selectedradio

  • xIt’s not an array, it’s a string' '
  • checkboxInstead ofradio

6. Select Box-radio<select>

7. Checkbox – Multiple selections

  • addmultiple
  • How to chooseCtrl + click Shift + click
  • X is an array
x:[]
Copy the code

form

<template> <div id="app"> <form @submit. Prevent ="onSubmit"> <label> <span> </span> <input type="text" V -model="user.username" /> </label> <label> <span> password </span> <input type="password" V -model="user.password" /> </label> </button> </form> </div> </template> <script> export default {name: 'App', data() { return { user: { username: '', password: '', }, }; }, methods: { onSubmit() { console.log(this.user); }, }, components: {}, }; </script>Copy the code

V-model modifier.lazy

  • In you outinputDisplay after event

.number

  • Convert the user’s input value to a numeric typev-modeladdnumberThe modifier

.trim

  • Filter user input beginning and end whitespace, can be givenv-modeladdtrimThe modifier

Custom Componentsv-model

  • V – nature of the model
When you write a V-model, you're writing two things: 1. Bind value equals the event 2. Value ="user.username" @input="user.username = $event.target.value"Copy the code
  • Here if it’s.syncIf you do, you can go straight$event
  • The value input combination
<template> <div> <input :value="value" @click="onInput" /> </div> </template> <script> export default { name: 'MyInput', props: { value: { type: String, }, }, methods: { oninput(e) { const event = e.target.value; this.$emit('input', value); ,}}}; </script>Copy the code