new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Vue · Tutorial · all subjects

tutorial/form-bindings

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Two-way binding with v-bind and v-on

To create a two-way binding on form input elements, use v-bind and v-on together. Bind the input's value attribute to state with :value, and listen to input events with @input. The v-on handler receives the native DOM event as an argument, from which you access e.target.value to update the state.

v-model directive for two-way binding

The v-model directive simplifies two-way bindings and is syntactic sugar for combining v-bind and v-on. Instead of using :value and @input handlers, you can use v-model="text" on an input element. v-model automatically syncs the input's value with the bound state.

v-model works with multiple input types

The v-model directive works not only on text inputs, but also on other input types such as checkboxes, radio buttons, and select dropdowns.

Manual two-way binding example with v-bind and v-on

This example shows how to implement two-way binding manually: <input :value="text" @input="onInput">. In the options API, the onInput method accesses the native DOM event: methods: { onInput(e) { this.text = e.target.value } }. In the composition API, the function directly updates the ref: function onInput(e) { text.value = e.target.value }.

v-model syntactic sugar form

The v-model directive is used with the syntax <input v-model="text">, where text is the state variable to be bound two-way to the input element.

Toggle todo completion with v-model and checkbox

Bind a checkbox input to a todo's `done` property using `v-model="todo.done"` to toggle completion status. This creates a two-way binding so checking/unchecking the checkbox updates the todo object.

Give your agent this brain