Vue 中v-model的完整用法及v-model的實現(xiàn)原理解析

更新時間：2025年02月10日 11:48:05 作者：小余努力搬磚

這篇文章詳細介紹了Vue.js中的v-model指令的使用,包括基本用法、原理、結(jié)合不同類型的表單元素（如radio、checkbox、select）以及使用修飾符（如lazy、number、trim）等,感興趣的朋友一起看看吧

一、 v-model的基本使用

v-model雙向綁定，既輸入框的value改變，對應(yīng)的message對象值也會改變，修改message的值，input的value也會隨之改變。無論改變那個值，另外一個值都會變化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<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>
</body>
</html>

二、 v-model的原理

先來一個demo實現(xiàn)不使用v-model實現(xiàn)雙向綁定。

實現(xiàn)雙向綁定需要是用v-bind和v-on，使用v-bind給input的value綁定message對象，此時message對象改變，input的值也會改變。但是改變input的value并不會改變message的值，此時需要一個v-on綁定一個方法，監(jiān)聽事件，當(dāng)input的值改變的時候，將最新的值賦值給message對象。獲取事件對象，target獲取監(jiān)聽的對象dom，value獲取最新的值。v-model = v-bind + v-on$event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- $event獲取事件對象，$event.target.value獲取input值 -->
<!--  <input type="text" :value="message" @input="changeValue($event.target.value)">{{message}}-->
  <!--事件調(diào)用方法傳參了，寫函數(shù)時候省略了小括號，但是函數(shù)本身是需要傳遞一個參數(shù)的，這個參數(shù)就是原生事件event參數(shù)傳遞進去-->
  <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>
</body>
</html>

三、 v-model結(jié)合radio類型使用

radio單選框的屬性是互斥的，如果使用v-model，可以不使用name就可以互斥。

v-model綁定`sex`屬性，初始值為“男”，選擇女后`sex`屬性變成“女”，因為此時是雙向綁定。

  <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>

四、 v-model結(jié)合復(fù)選框類型使用

checkbox可以結(jié)合v-model做單選框，也可以多選框。

checkbox結(jié)合v-model實現(xiàn)單選框，定義變量初始化為，點擊checkbox的值為，也是。isAgree false true isAgree true

checkbox結(jié)合v-model實現(xiàn)多選框，定義數(shù)組對象，用于存放愛好，將與checkbox對象雙向綁定，此時選中，一個多選框，就多一個true，就添加一個對象。hobbies hobbies hhobbies

單選

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--單選框-->
  <h2>單選框</h2>
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意協(xié)議
  </label>
  <h3>您的選選擇是：{{isAgree}}</h3>
  <button :disabled="!isAgree">下一步</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isAgree: true
    }
  })
</script>
</body>
</html>

多選

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<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/vue@2.6.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: []
    }
  })
</script>
</body>
</html>

值的綁定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<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/vue@2.6.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: [],
      hhobbies: ["籃球","足球","乒乓球","羽毛球"]
    }
  })
</script>
</body>
</html>

五、 v-model結(jié)合select

v-model結(jié)合select可以單選也可以多選。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-model結(jié)合select類型</title>
</head>
<body>
  <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>
</body>

六、 v-model的修飾符的使用

lazy：默認情況下是實時更新數(shù)據(jù)，加上，從輸入框失去焦點，按下enter都會更新數(shù)據(jù)
number：默認是字符串類型，使用復(fù)制為數(shù)字類型
trim：用于自動過濾用戶輸入的首尾空白字符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-model修飾符</title>
</head>
<body>
  <div id="app">
    <h2>v-model修飾符</h2>
    <h3>lazy,默認情況是實時更新數(shù)據(jù)，加上lazy，從輸入框失去焦點，按下enter都會更新數(shù)據(jù)</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/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        age:18,
        name:"ttt"
      },
    })
  </script>
</body>
</html>

到此這篇關(guān)于Vue 中v-model的完整用法（v-model的實現(xiàn)原理）的文章就介紹到這了,更多相關(guān)vue v-model用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: