YouTip

Vue3 Forms

const app = { data() { return { message: '', message2: 'rn' } } } Vue.createApp(app).mount('#app') [Try it »](#) Interpolation within a `` does not work. You must use `v-model` instead: <!-- Wrong --><textarea>{{ text }} ### Checkbox A single checkbox can be bound to a boolean value, while multiple checkboxes can be bound to the same array: ## Checkbox The following example demonstrates two-way data binding with checkboxes: const app = { data() { return { checked : false, checkedNames: [] } } } Vue.createApp(app).mount('#app') [Try it »](#) The effect of checking the checkboxes in the example is as follows: !(#) ### Radio Buttons The following example demonstrates two-way data binding with radio buttons: ## Radio Buttons const app = { data() { return { picked : '' } } } Vue.createApp(app).mount('#app') [Try it »](#) After selection, the effect is as shown below: !(#) ### Select List The following example demonstrates two-way data binding with a dropdown list: ## Select const app = { data() { return { selected: '' } } } Vue.createApp(app).mount('#app') [Try it »](#) Selecting produces the following output: !(#) For multiple selections, it binds to an array: ## Select const app = { data() { return { selected: '' } } } Vue.createApp(app).mount('#app') [Try it »](#) Selecting and Google: !(#) Using **v-for** to dynamically generate options: ## Select const app = { data() { return { selected: 'www.', options: [ { text: '', value: 'www.' }, { text: 'Google', value: 'www.google.com' }, { text: 'Taobao', value: 'www.taobao.com' } ] } } } Vue.createApp(app).mount('#app') [Try it »](#) Selecting : !(#) ### Value Binding For radio buttons, checkboxes, and select options, the value bound by `v-model` is typically a static string (for checkboxes, it can also be a boolean): ABC However, sometimes you may want to bind the value to a dynamic property on the current active instance. This can be achieved using `v-bind`. Additionally, `v-bind` allows you to bind input values to non-strings. **Checkbox:** ... // When checked, vm.toggle === 'yes' // When unchecked, vm.toggle === 'no' **Radio:** // When selected, vm.pick === vm.a **Select Option:** 123 // When selected, typeof vm.selected // => 'object' vm.selected.number // => 123 * * * ## Modifiers ### .lazy By default, `v-model` synchronizes the input's value with the data on the `input` event. You can add the `.lazy` modifier to instead synchronize on the `change` event: ### .number If you want to automatically convert the user's input to a Number type (if the conversion result of the original value is NaN, the original value is returned), you can add the `.number` modifier to `v-model` to handle the input value: This is often useful because even with `type="number"`, the value entered in HTML is always returned as a string. ### .trim If you want to automatically trim the user's input, you can add the `.trim` modifier to `v-model` to filter out whitespace: