文本框輸入，p標簽的內容自動變成文本框的內容，如下是三種方法的測試：
方法1：JS里的onchange，當文本框內容改變事件，該事件里寫的方法是，獲取p標簽本身，然后獲取文本框的值，賦值給變量，最后給p標簽賦值那個文本框的值。
效果：輸入途中，p標簽不會變化，還是原來的內容，當輸入的焦點離開文本框時，p標簽變成了文本框中的值。
方法2：JS里的oninput，當文本框內容改變事件（不同於上面的，會即時生效），該事件的方法同上。
效果：輸入途中，p標簽也會跟着變化，即時是輸入途中也會改變。
方法3：引入vue.js，給input文本框加v-mode，在div3里p標簽位置設置需要顯示內容的地方
效果：輸入途中，p標簽也會跟着變化，即時是輸入途中也會改變。
測試代碼：
<style> #div1{background-color:#d9b6b6;} #div2{background-color:#b4e7aa;} #div3{background-color:#c5f2ee;} </style> </head> <body> <script src="vue.js"></script> </head> <body> <div id="div1"><!--非vue--> JS的onchage事件： <input type="text" id="t1" onchange="p1()"> <p id="pp">原始值</p> </div> <script> function p1(){ var lb_p=document.getElementById("pp"); var txt_t1=document.getElementById("t1").value; lb_p.innerHTML=txt_t1;} </script> <div id="div2"><!--非vue-一些ie低版本不支持--> JS的oninput事件： <input type="text" id="t2" oninput="p2()"> <p id="pp2">原始值</p> </div> <script> function p2() { var lb_p=document.getElementById("pp2"); var txt_t2=document.getElementById("t2").value; lb_p.innerHTML=txt_t2; } </script> <div id="div3"> vue的v-mode： <input v-model="message"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#div3', data: { message: '原始值' } }) </script> </body>
圖示：
