Collect form data

We mainly use the V-model command to collect form data (the V-model command can achieve two-way binding of data).

If: then v-model collects value.

If: , v-model collects value.

1. If input value is not configured, checked or is a Boolean value.

2. Configure the input value property:

(1) The initial value of the V-model is not an array, then checked is collected (checked or unchecked is a Boolean value)

(2) The initial value of v-Model is an array, so the collection is an array of values

Therefore, when we want to collect the checkBox value array, we should initialize the corresponding property in data as an empty array.

(Like an input text field, value is automatically bound to the input, but a radio field requires us to manually configure the value property to return radio content, otherwise it will only return true/false)

One of the two radio boxes can be set by setting the same name

Gender: Male <input type="radio" name="sex" V-model =" userinfo.sex "value="male"> female <input type="radio" name="sex" v-model="userInfo.sex" value="female">Copy the code

The filter

Filters do what they do: They do a specific formatting of the data to display, not changing the original data, but creating a new one.

We need to create a filter first

Vue. Filter (value[,arg1,arg2... Return newValue}) {return newValue})Copy the code

General filter we can use ready-made plug-ins, plug-ins can be imported.

New data written after filtering:

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
Copy the code

Args can pass in the desired format.

Filters can be continuously filtered from left to right.

Built-in commands

V-text: update the innerText of an element V-html: update the innerHTML of an element V-if: conditional render (dynamic control node exists) V-else: conditional render (dynamic control node exists) V-show: Conditional rendering (dynamic control display) V-for: traverses groups/objects V-on: binding event listener, can be abbreviated as @V-bind: XXX: binding parsing expression, can be abbreviated as XXX V-model: bidirectional data bindingCopy the code