vue是怎么实现数据双向绑定的
2018-12-24 本文已影响0人
锋叔
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue怎么是想数据的双向绑定</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body style="text-align: center">
<input type="text" id="txt"/>
<p id="show"></p>
<script>
var obj = {}
var txt = document.getElementById('txt')
var show = document.getElementById('show')
Object.defineProperty(obj, "txt", {
get: function () {return obj},
set: function (val) { show.innerHTML = val }
})
txt.addEventListener('keyup', function(e) {
obj.txt = e.target.value
})
</script>
</body>
</html>
就是这么简单！你也会。写这个的目的是因为面试高级前端可能会遇到这个面试题。
