基本使用

通過v-model可以實現數據的雙向綁定，實現vue.js變量和表單標簽的value 屬性

為什么使用v-model?
v-model是語法糖作為雙向綁定指令也是vue兩大核心功能之一，使用非常方便，提高
前端開發效率。在view層，model層相互需要數據交互，即可使用v-model。

注意: v-model一般情況用于表單元素中(不是一定的)

v-model就是一個語法糖，

<input :value=“msg” @input=“msg=$event.target.value” />
的簡寫模式

v-model 實現雙向綁定的本質
它背后的本質其實是兩個指令的結合：

（1）v-bind 綁定一個 value 值。

v-bind 能實現數據的單向綁定，從 Model 層自動綁定到 View 層，但是無法實現數據的雙向綁定。

（2）v-on 給當前元素綁定 input 事件。

v-on：input 是一個動態監聽用戶在表單中輸入數據的事件，它的屬性值可以是一個方法

v-model 指令修飾符
關于 v-model 指令的修飾符有：.lazy、.number、.trim。它們主要是給 v-model 指令起到一個輔助作用。

<template><div class="test-model"><p>這里是input輸入框輸入時響應的文本</p><inputtype="text"placeholder="這是input輸入框":value="testMessage"@input="emitInput"/></div> </template><script> export default {data () {return {testMessage: "",};},methods: {emitInput ($event) {this.testMessage = $event.target.value;},}, }; </script> <style scoped> .test-model p{ font-size: 20px; margin: 20px; } input{ font-size: 20px; margin: 20px; } </style>

總結

以上是生活随笔為你收集整理的v-model的底层原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。