描述v-model语法糖实现方式

在vuejs 中,v-model 这个语法糖能够很方便的实现表单和数据之间的绑定。比如在input 的输入框中,视图能够实时呈现我们在输入框中输入的内容。

<!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">
         <!-- <input type="text" id="inp" v-model="title"> -->
         <input type="text" id="inp" :value="title" @input="changeTitle">
         <p>
             实时显示你在input中输入的内容:
             <span id="show">{{title}}</span>
         </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                title:""    
            },
            methods: {
                changeTitle(e){
                     this.title = e.target.value
                }
            },
        })
    </script>
</body>
</html>
暂无评论

请到【后台 - 用户 - 我的个人资料】中填写个人说明。

发表评论