preface
Summarize vUE usage
v-model
The basic use
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="Your name">
<h1>Hello, {{name}}</h1>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
name: ' '}})</script>
</body>
</html>
Copy the code
Input Chinese, real-time display pinyin
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @input="handleInput" placeholder="Enter...">
<h1>Hello, {{message}}</h1>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
message: ' '
},
methods: {
handleInput(e) {
this.message = e.target.value; }}})</script>
</body>
</html>
Copy the code
The radio button
Use radio buttons alone, not v-Model
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < script SRC =" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "> < / script > < / head > <body> <div id="app"> <input type="radio" :checked="picked"> </div> <script> let app = new Vue({ el: '#app', data: { picked: true } }) </script> </body> </html>Copy the code
Combined use to achieve mutually exclusive selection, using V-model with value
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="radio" v-model="picked" value="js" id="js">
<label for="js">JavaScript</label>
<br>
<input type="radio" v-model="picked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>The selected items are: {{picked}}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
picked: 'js',}})</script>
</body>
</html>
Copy the code
Check box
Use checkboxes alone
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">Select status: {{checked}}</label>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
checked: false,}})</script>
</body>
</html>
Copy the code
Use checkboxes in combination with value
When checked, the value of value is automatically pushed into the array
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="js">JavaScript</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>The items selected are: {{checked}}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
checked: ['html'.'css'],}})</script>
</body>
</html>
Copy the code
Selection list
A list of radio selections
If there is a value attribute, v-Model preferentially matches the value. If not, the text of
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>The selected items are: {{selected}}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
selected: 'html',}})</script>
</body>
</html>
Copy the code
A list of multiple choices
Difference with radio list: Data format is array
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected" multiple>
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>The selected items are: {{selected}}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
selected: ['html'.'js'],}})</script>
</body>
</html>
Copy the code
For a list of multiple selections, use V-for
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected" multiple>
<option v-for="option in options" :value="option.value">{{ option.text}}</option>
</select>
<p>The selected items are: {{selected}}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
selected: 'html'.options: [{
text: 'HTML'.value: 'html'}, {text: 'JavaScript'.value: 'js'
}, {
text: 'CSS'.value: 'css'}]}})</script>
</body>
</html>
Copy the code
Binding values
V-models can bind dynamic data in addition to booleans or platform strings
The radio button
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="radio" v-model="picked" :value="value">
<label>The radio button</label>
<p>{{ picked }}</p>
<p>{{ value }}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
picked: false.value: 123}})</script>
</body>
</html>
Copy the code
Check box
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<label>Check box</label>
<p>{{ toggle }}</p>
<p>{{ value1 }}</p>
<p>{{ value2 }}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
toggle: false.value1: 'a'.value2: 'b',}})</script>
</body>
</html>
Copy the code
The modifier
.lazy
Change from synchronizing input box data in the input event to synchronizing data in the change event by default
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
message: ' '}})</script>
</body>
</html>
Copy the code
.number
Convert the input type to Number type
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="number" v-model.number="message">
<p>{{ typeof message }}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
message: ' '}})</script>
</body>
</html>
Copy the code
.trim
Filter the first and last Spaces of input
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.trim="message">
<p>{{ message }}</p>
</div>
<script>
let app = new Vue({
el: '#app'.data: {
message: ' '}})</script>
</body>
</html>
Copy the code