V-Model是v-on和v-bind的语法糖，在vue中应该尽量不要看到DOM

以下实现代码：

<!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">

    <!--
      v-model是v-bind和v-on的语法糖，可以简化模板代码，绑定数据和监听事件。
      用v-bind绑定数据和v-on监听事件同样可以实现双向数据绑定。    
    -->
         <p>内容：{{ message }}</p>
         <input type="text" id="user" v-bind:value="message" v-on:input="changeMessage">
    </div>
    <script src="vue.js"></script>
    <script>
      let vm =  new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            },

            methods: {
                changeMessage: function() {
                    let valueuser=document.getElementById("user").value;
                    this.message = valueuser;
                }
            }
        }); 
    </script>
</body>
</html>
posted @ 2024-09-10 21:14  一个人走在路上  阅读(30)  评论(0)    收藏  举报