表单绑定 v-model —— :value @input || v-model原理
生活随笔
收集整理的這篇文章主要介紹了
表单绑定 v-model —— :value @input || v-model原理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
表單綁定 v-model?
01-v-model的基本使用
<!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: '你好啊'}}) </script></body> </html>v-model原理?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><!--<input type="text" v-model="message">--><!--<input type="text" :value="message" @input="valueChange">--><input type="text" :value="message" @input="message = $event.target.value"><h2>{{message}}</h2> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {valueChange(event) {this.message = event.target.value;}}}) </script></body> </html>總結
以上是生活随笔為你收集整理的表单绑定 v-model —— :value @input || v-model原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高阶函数||编程范式: 命令式编程/声明
- 下一篇： 求最大连续子序列和——解法1 – 暴力出