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