Forms and listeners
1,v-model
Put it in input and other input box labels
v-model = 'variable'
(1) Set the v-model = 'variable' in the form element, such as the input tag
(2) Initialize variables in data, then the content in input is that content
(3) Variable can be extracted, and {variable}} will get the content of input in real time
(4) To wait until the enter / focus disappears, the content in the variable is the content in the input box, change to v-model.lazy = 'variable'
(5) Remove the space before and after the input box, v-model.trim = 'variable'
(6) If you want to automatically convert the user's input value to numeric type, you can give v-model.number = 'variable':
(7).lazy,. trim,. number can be chain called
(8) Monitor the change of input box content, watch, at the same level as data in script, when the content of input box changes, enter / focus disappears to trigger
watch:{
Variable name of v-model (content parameter of data input box)
{
xxx
}
}
2. Put in radio / check box
v-model = 'variable'
Radio box:
(1) Variables must be declared in the data attribute before use
(2) The value of the variable is the value set in the selected radio box label
Multiple boxes:
(1) Variables must be declared in the data attribute before use. If the variable is array [] and the value value is given in the label, check the multiple check box, and the
The content is the value of the selected multiple selection box
(2) If the variable declaration is not an array, check the multi check box, the variable will display true/false, and the multi check box will be checked or unchecked at all
3. Drop down box
Use v-model = 'variable' in the select tag
(1) Variables must be declared in the data attribute before use
(2) The content of the variable is the content of the option tag
4. Multiple selection drop-down box (that is, multiple attribute is added to the drop-down box)
(1) Variables must be declared in the data attribute before use, and must be declared as an array []
(2) The content of the variable is the content of the option tag
5. Monitor function
(1)watch is the same as data in script. When the content of the input box changes, the enter / focus disappears
(2) Can monitor the change of any variable, function name is variable name, parameter is variable content
watch:{
Function name (data)
{
xxx
}
}
Code example:
<template lang='html'> <div > <div> //Input box <input v-model.lazy.trim.number='inpt' type='text' name='' value='' id=''> <p>{{inpt}}</p> //Single multi select button <input type='checkbox' value='a' id='ipt' v-model='checked'> <label for='ipt'>{{checked}}</label> <span>{{checked}}</span> //radio button <input type="radio" id="one" v-model="picked"> <label for="one">One</label> <span>{{picked}}</span> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> //Multiple drop-down box <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> //Radio dropdown <select v-model="selected2"> <option disabled value="">Please choose</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected2 }}</span> //Multi select button <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> </div> </template> <script> export default{ name:'vuedemo', data() { return{ inpt:'', checked:[], picked:'', selected:[], selected2:[], checkedNames:[] } }, //wacth watch:{ inpt(data) { if(data==100) { this.inpt='Meet the requirements' } } } } </script> <style lang='css'> </style>
