简单实现实时输入网页，参考vue底层实现
生活随笔
收集整理的這篇文章主要介紹了
简单实现实时输入网页，参考vue底层实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需要用到的手段
dom操作
通過id獲取標簽內容
document.getElementById("填# + id");// 這樣就獲取到了 dom元素事件監聽
接下來就開始進行input的事件監聽
給input標簽的 input 進行監聽document.getElementById("input標簽的id").addEventListener("這里是一input事件", 這里是一個函數);從input標簽拿到值
接下來獲取到input的值
//首先選中dom元素 然后.value 就可以獲取到值了var value = document.getElementById("inputID").value;// value 就是獲取到的id值監聽一個對象的屬性
給對象的屬性之變化
var obj = {};Object.defineProperty(對象，對象屬性，對象{get(){console.log("獲取了對象的屬性");},set(){console.log("設置了對象的屬性");}})接下來我來實現這個簡單的項目，css寫的丑，別介意
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>simple Imitate</title><style>/* css 實現 */.bigBox{width: 400px;height: 50px;}.bigBox #box {width: 200px;height: 50px;font-size: 25px;color: aqua;cursor: pointer;float: left;}.bigBox span{display: block;width: 120px;height: 50px;font-size: 25px;color: skyblue;cursor: pointer;float: left;}.secondBox{width: 400px;height: 120px;}.secondBox span{display: block;width: 120px;height: 50px;font-size: 25px;color: skyblue;cursor: pointer;float: left;}.secondBox #box1{width: 200px;height: 33px;font-size: 25px;color: aqua;float: left;border: 1px solid #d1d1d1;outline: none;}</style> </head> <body> <!-- html 結構 --> <div class="bigBox"><span>輸入回顯</span><div id="box">你好，世界！</div> </div> <div class="secondBox"><span>輸入</span><label><input id="box1" type="text" name="text"> </label> </div> <script>// 這個函數實現的是傳入參數 渲染dom 并且這里是監聽給對象賦值的過程,簡單看看應該能看懂function init(value) {var obj = {}let obox = document.getElementById("box");Object.defineProperty(obj, "myname", {// 這里是獲取屬性時觸發的函數get() {console.log("get")},// 這里是設置屬性時觸發的函數set(value) {console.log(value);obox.innerHTML = value;}});// 設置對象屬性 將input事件穿過來的值賦值到obj.name;obj.myname = value}// 這里是input事件觸發后執行的函數function RePlaceHander() {// 這里獲取了input標簽里的值var value = document.getElementById("box1").value;init(value);}// 監聽input標簽變化function RePlace() {document.getElementById("box1").addEventListener("input", RePlaceHander);}RePlace(); </script> </body> </html>總結
以上是生活随笔為你收集整理的简单实现实时输入网页，参考vue底层实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 主机游戏和pc游戏的区别 游戏和主机游戏
- 下一篇： Vue2 的学习经历 初识