vue双向绑定经典案例
生活随笔
收集整理的這篇文章主要介紹了
vue双向绑定经典案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、無需廢話，直接上代碼
復制到新建的記事本文件，保存問demo.html即可。
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>歡迎系統</title> </head><body align="center"><br><br><br><br><br><br><br><br><div id="app">請錄入姓名：<input type="text" v-model="word"><p>你好：{{word}}！</p><button v-on:click="change">復原</button> </div></body> </html> <script>var vm = new Vue({el: '#app',data: {word: '老鐵'},methods: {change: function() {this.word = '老鐵們';}}}); </script>2、展示效果，文本框錄入姓名，頁面自動展示歡迎該人
點擊【復原】按鈕，消息回復默認值。
?
總結
以上是生活随笔為你收集整理的vue双向绑定经典案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 18位身份证号码校验
- 下一篇： 记一次对vue双向绑定的理解