基本使用

通過v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，實(shí)現(xiàn)vue.js變量和表單標(biāo)簽的value 屬性

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

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

v-model就是一個(gè)語法糖，

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

v-model 實(shí)現(xiàn)雙向綁定的本質(zhì)
它背后的本質(zhì)其實(shí)是兩個(gè)指令的結(jié)合：

（1）v-bind 綁定一個(gè) value 值。

v-bind 能實(shí)現(xiàn)數(shù)據(jù)的單向綁定，從 Model 層自動(dòng)綁定到 View 層，但是無法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

（2）v-on 給當(dāng)前元素綁定 input 事件。

v-on：input 是一個(gè)動(dòng)態(tài)監(jiān)聽用戶在表單中輸入數(shù)據(jù)的事件，它的屬性值可以是一個(gè)方法

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

<template><div class="test-model"><p>這里是input輸入框輸入時(shí)響應(yīng)的文本</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>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。