vue的数据双向绑定

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="" id="input" value="" />
        <h1></h1>
        <h3 id="username"></h3>
        <h4 id="age"></h4>
        <script type="text/javascript">
            var inputText = document.querySelector('#input')
            var h1 = document.querySelector('h1')
            var h3 = document.querySelector('#username')
            var age = document.querySelector('#age')
            inputText.oninput = function(){
                var value =  inputText.value
                h1.innerHTML = value;
            }
            var obj = {
//                name:'张三',
                age:14,
                set name(value){
//                    console.log(value)
                    this._name = value
                    h3.innerHTML = this._name
                },
                get name(){
                    return this._name
                },
            }
            console.log(obj)
            //setter,getter//es6,es2015标准
            //在给对象属性赋值，或者是获取对象属性的时候，会调用setter、getter两个方法
        </script>
    </body>
</html>

以上是 vue的数据双向绑定 的全部内容， 来源链接： utcz.com/z/380674.html

回到顶部