Vue 双向绑定小案例
生活随笔
收集整理的這篇文章主要介紹了
Vue 双向绑定小案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用Vue實現雙向綁定的小案例。
**雙向綁定：**使用了雙向綁定的兩個內容一定是完全一樣，同時變化（同增同減）
效果圖
原始樣式
刪除輸入框內容上面顯示的文本內容隨之減少
在下面輸入框輸入內容上面顯示的內容也會增加
**注意：**在你寫代碼之前一定要引入Vue.js架包
代碼演示
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script src="js/vue.js"></script></head><body><div id="show"><p>{{message}}</p><input v-model="message" /></div></body><script>new Vue({el: '#show',data:{message: 'Hello Vue'}})</script> </html>掃一掃關注我的公眾號獲取更多資訊呦！！！
總結
以上是生活随笔為你收集整理的Vue 双向绑定小案例的全部內容，希望文章能夠幫你解決所遇到的問題。
