09-Vue的v-model(双向绑定)的使用
v-model的基本使用 < html lang = " en " > < head > < meta charset = " UTF-8 " /> < title > Document </ 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 : "你好" } } ) </ script > </ body > </ html > 1.什么是v-model 简单来说就是将data变量和用户输入绑定起来。 效果如下: 2.问题分析 当input使用v-model和data变量中的message绑定之后,可以理解为二者为同一个地址,所以可以通过input直接修改message,而Mustache语法{{message}}显示的内容也会随之更改。 v-model的原理 < html lang = " en " > < head > < meta charset = " UTF-8 "