第七个vue程序,如何通过v-model指令来实现双向绑定

wx-li

于 2020-10-14 09:39:59 发布

阅读量138

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_37179281/article/details/109066083

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文演示了如何在Vue.js应用中通过v-model指令实现输入元素与数据模型的双向绑定。示例展示了在文本输入框和文本区域中应用v-model，实时更新并显示绑定的`message`数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--第七个vue程序,如何通过v-model指令来实现双向绑定-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    输入的文本: <input type="text" v-model="message"> {{message}}
    <p></p>
    输入的文本: <textarea type="text" v-model="message"></textarea>{{message}}
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello vue!"
        }
    });
</script>
</body>
</html>