Chapter 6 of Vue.js actual combat Form and v-model

title: Chapter 6 Form and v-model
tags: 2019-11-30
notebook: Vue

6.1 basic usage

v-model is used for bidirectional data binding on form elements: for example, the content entered in the input box will be mapped to the data on Bondi

6.1.1 attention

After using v-module, the value displayed in the control of the form is only related to the bound data, not the value during initialization, and the value between < textarea > < / textarea > will not be displayed,
When using v-module, if you use the Chinese input method to input Chinese, it will be in the Pinyin stage before the phrase is selected. Vue's data will not be updated and will be triggered when you knock down Chinese characters If you want to always update, you can use @ input instead of v-module

example

<div id="app">
  <input type="text" @input="handleInput" placeholder="input..">
  <p>The input content is:{{message}}</p>
</div>
================================================================
var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    handleInput: function (e) {
      this.message = e.target.value
    }
  },
})

6.2.2 radio buttons

When the radio button is used alone, it does not need v-module, but directly uses v-bind to bind a Boolean value. When it is true, it is selected, and when it is false, it is not selected

Example of using radio alone

<div id="app">
  <input type="radio" name="" id="" :checked="picked">
  <label>radio button</label>
</div>
======================================================================
var app = new Vue({
  el: '#app',
  data: {
    picked: false
  }
})

radio combination uses mutually exclusive effect

<div id="app">
  <input type="radio" name="" v-model="picked" value="vue" id="vue">
  <label for="vue">Vue</label>
  <input type="radio" name="" v-model="picked" value="js" id=" js">
  <label for="js">JavaScript</label>
  <input type="radio" name="" v-model="picked" value="css" id="css">
  <label for="css">CSS</label>
</div>
======================================================================
var app = new Vue({
  el: '#app',
  data: {
    picked: 'js'
  }
})

6.2.2 check box

Similar to radio buttons, check boxes can also be bound to a Boolean value through v-mode when used alone

Use alone;

<div id="app">
  <input type="checkbox" name="" id="checked" v-model="checked">
  <label for="checked">Selection status:{{checked}}</label>
</div>
====================================================================
var app = new Vue({
  el: '#app',
  data: {
    checked: true
  }
})

Combined use

<div id="app">
  <input type="checkbox" name="" v-model="checked" value="vue" id="vue">
  <label for="vue">Vue</label>
  <input type="checkbox" name="" v-model="checked" value="js" id="js">
  <label for="js">JavaScript</label>
  <input type="checkbox" name="" v-model="checked" value="css" id="css">
  <label for="css">CSS</label>
  <p>Your choice is:{{checked}}</p>
</div>
========================================================================
var app = new Vue({
  el: '#app',
  data: {
    checked: ['css', 'js']
  }
})

6.2.3 drop down list

<div id="app">
  <select name="" v-model="selected" id="">
    <option value="html">HTML</option>
    <option value="js">JavaScript</option>
    <option value="vue">Vue</option>
  </select>
  <p>Your choice:{{selected}}</p>
</div>
=====================================================================
var app = new Vue({
  el: '#app',
  data: {
    selected: 'js'
  }
})

If the value of option has a value, v-model will match value first. If value has no value, it will match the text of option

6.2.4 binding value

radio button

<div id="app">
  <input type="radio" v-model="picked" :value="value" id="ra">
  <label for="ra">radio button</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>
</div>
====================================================================
 var app = new Vue({
  el: '#app',
  data: {
    picked: false,
    value: 123
  }
})

Check box

<div id="app">
  <input type="checkbox" name="" id="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label for="checkbox">check box</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>
</div>
============================================================================================================
var app = new Vue({
  el: '#app',
  data: {
    toggle: false,
    value1: 'a',
    value2: 'b'
  }
})

Drop down list select

<div id="app">
  <select name="" id="" v-model="selected">
    <option :value="{number : 123}">123</option>
  </select>
  <p>{{selected}}</p>
</div>
=========================================================
var app = new Vue({
  el: '#app',
  data: {
    selected: ''
  }
})

6.2.5 modifiers

. lazy updates data after losing focus or entering

<div id="app">
<input type="text" v-model.lazy="message">
<!-- At this time message It is not updated in real time,It is updated after losing focus or entering -->
<p>{{message}}</p>
</div>
======================================================================
var app = new Vue({
  el:'#app',
  data:{
    message:''
  }
})

. NUmber automatically converts input data to NUmber type

<div id="app">
  <input type="text" v-model.number="number">
  <p>{{typeof number}}</p>
</div>
======================================================================
var app = new Vue({
  el: '#app',
  data: {
    number: 123
  }
})

. trim self fetch removes the leading and trailing spaces of the input

Tags: Vue

Posted by aahh on Wed, 25 May 2022 20:59:20 +0300