v-model实现数据的双向绑定
生活随笔
收集整理的這篇文章主要介紹了
v-model实现数据的双向绑定
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue.js提供了v-model指令，用于在表單類元素上雙向綁定數據，
比如，在數據框上使用時，輸入的內容會實時映射到綁定的數據上。?
<div id="app"><input type="text" v-model="message" placeholder="輸入你的內容"><p>輸入的內容是：{{message}}</p></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>var app = new Vue({el:'#app',data:{message:''}}) </script>對于文本域textarea也是同樣的用法：
<div id="app1"><textarea v-model="text" placeholder="請輸入你的內容"></textarea><p>輸入的內容是：</p><p style="white-space:pre">{{text}}</p></div>var app1 = new Vue({el:'#app1',data:{text:''}})完整代碼：
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Vue V-model實現雙向綁定的基本用法</title></head><body><div id="app"><input type="text" v-model="message" placeholder="輸入你的內容"><p>輸入的內容是：{{message}}</p></div><div id="app1"><textarea v-model="text" placeholder="請輸入你的內容"></textarea><p>輸入的內容是：</p><p style="white-space:pre">{{text}}</p></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>var app = new Vue({el:'#app',data:{message:''}})var app1 = new Vue({el:'#app1',data:{text:''}}) </script></body> </html>?
總結
以上是生活随笔為你收集整理的v-model实现数据的双向绑定的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BJUI实现每日数据汇总默认显示某天的数
- 下一篇： Vue的表单组件之单选按钮