Vue 实时获取文本框内容
生活随笔
收集整理的這篇文章主要介紹了
Vue 实时获取文本框内容
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖：
簡(jiǎn)單版本：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"><input type="text" id="msg" v-model="msg"><br><span>{{msg}}</span></div><!-- 引入 vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app = new Vue({el: '#app',data: {msg:'',},})</script> </body></html>復(fù)雜版本：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"><input type="text" id="msg" v-model="txt" v-on:keyup="changeMsg"><br><span>{{msg}}</span></div><!-- 引入 vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app = new Vue({el: '#app',data: {txt:'',msg:'',},methods:{changeMsg:function(){this.msg = this.txt}}})</script> </body></html>
總結(jié)
以上是生活随笔為你收集整理的Vue 实时获取文本框内容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 经典冒泡排序法
- 下一篇： 盘后股价上涨6% 美光能否结束水逆？