vue-例3-13v-model.html

最新推荐文章于 2025-12-21 13:28:14 发布

原创最新推荐文章于 2025-12-21 13:28:14 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

661 篇文章

订阅专栏

该文章展示了一个基本的Vue.js应用，其中使用v-model指令实现了文本输入框与数据模型message的双向绑定。当用户在输入框中输入文字时，页面上的<p>元素会实时更新显示相同的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{{message}}</p>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
           el:'#app',
           data:{
               message:'Hello vue'
           }
        });
    </script>
</body>
</html>