1. The basic use of v-model

v-model two-way binding, when the value of the input box changes, the value of the corresponding message object will also change, modify the value of the message, and the value of the input will also change accordingly. No matter which value is changed, the other value will change.

<div id="app">
  <input type="text" v-model="message">{
   
   {message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "hello"
    }
  })
</script>

2. The principle of v-model

First come a demo to realize two-way binding without using v-model.


<div id="app">
  <!-- $event获取事件对象，$event.target.value获取input值 -->
<!--  <input type="text" :value="message" @input="changeValue($event.target.value)">{
   
   {message}}-->
  <!--事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去-->
  <input type="text" :value="message" @input="changeValue">{
   
   {message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "hello world"
    },
    methods: {
      changeValue(event){
        console.log("值改变了");
        this.message = event.target.value
      }
    }
  })
</script>

, v-model = v-bind + v-on To achieve two-way binding, you need to use v-bind and v-on, and use v-bind to bind the message object to the value of the input. When the message object changes, the value of the input will also change. But changing the value of the input will not change the value of the message. At this time, a v-on is required to bind a method to listen for events. When the value of the input changes, assign the latest value to the message object. $eventGet the event object, target gets the monitored object dom, and value gets the latest value.

3. v-model combined with radio type

The properties of the radio radio button nameare mutually exclusive. If you use v-model, you can namebe mutually exclusive without using it.

  <div id="app">
    <!-- name属性radio互斥 使用v-model可以不用name就可以互斥 -->
    <label for="male">
      <input type="radio" id="male" name="sex" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex">女
    </label>
    <div>你选择的性别是：{
   
   {sex}}</div>

  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        sex:"男"
      },

    })
  </script>

The `sex` attribute is bound to v-model, and the initial value is "male". After selecting a female, the `sex` attribute becomes "female", because it is a two-way binding at this time.

4. v-model is used in combination with checkbox type

checkbox can be combined with v-model to make single-selection boxes or multiple-selection boxes.

<div id="app">
  <!--单选框-->
  <h2>单选框</h2>
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h3>您的选选择是：{
   
   {isAgree}}</h3>
  <button :disabled="!isAgree">下一步</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isAgree: true
     
    }
  })
</script>

multiple choice


<div id="app">
  <!--多选框-->
  <h2>多选框</h2>
  
    <input type="checkbox" name="hobby" value="篮球"  v-model="hobbies">篮球
    <input type="checkbox" name="hobby" value="足球"  v-model="hobbies">足球
    <input type="checkbox" name="hobby" value="羽毛球"  v-model="hobbies">羽毛球
    <input type="checkbox" name="hobby" value="乒乓球"  v-model="hobbies">乒乓球
  <h2>你的爱好是：{
   
   {hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: []

    }
  })
</script>

value binding


<div id="app">
  <!--多选框-->
  <h2>多选框</h2>
  <label :for="item" v-for="(item,index) in hhobbies" :key="index">
    <input type="checkbox" name="hobby" :value="item" :id="item" v-model="hobbies">{
   
   {item}}
  </label>
  <h2>你的爱好是：{
   
   {hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: [],
      hhobbies: ["篮球","足球","乒乓球","羽毛球"]

    }
  })
</script>

The checkbox is combined with v-model to realize the radio button, and the defined variable isAgreeis initialized to false, and the value of the clicked checkbox trueis isAgreealso true.
The checkbox combines v-model to implement a multi-selection box, defines an array object hobbiesto store hobbies, and will hobbiesbind to the checkbox object in two directions. At this time, if a multi-selection box is selected, one more true will be added, and hobbiesan object will be added.

Five, v-model combined with select

  <div id="app">
    <!-- select单选 -->
    <select name="fruit" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
    </select>
    <h2>你选择的水果是：{
   
   {fruit}}</h2>

    <!-- select多选 -->
    <select name="fruits" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
    </select>
    <h2>你选择的水果是：{
   
   {fruits}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        fruit:"苹果",
        fruits:[]
      },

    })
  </script>

v-model combined with select can be single-selected or multi-selected.

Six, the use of v-model modifiers


  <div id="app">
    <h2>v-model修饰符</h2>
    <h3>lazy,默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据</h3>
    <input type="text" v-model.lazy="message">
    <div>{
   
   {message}}</div>
    <h3>修饰符number,默认是string类型，使用number赋值为number类型</h3>
    <input type="number" v-model.number="age">
    <div>{
   
   {age}}--{
   
   {typeof age}}</div>
    <h3>修饰符trim:去空格</h3>
    <input type="text" v-model.trim="name">

  </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        age:18,
        name:"ttt"
      },

    })
  </script>

lazy: By default, the data is updated in real time. In addition lazy, when the focus is lost from the input box, the data will be updated after pressing enter.
number: The default is the string type, use numberthe copy as the number type.
trim: Used to automatically filter the leading and trailing blank characters entered by the user.

The use of v-model in Vue