Vue.js教程（六）：v-model表单操作

最新推荐文章于 2024-08-16 15:49:18 发布

杨景文Blog

最新推荐文章于 2024-08-16 15:49:18 发布

阅读量1k

点赞数

分类专栏：前端技术文章标签： vue

本文链接：https://blog.csdn.net/muyi_amen/article/details/84107355

版权

前端技术专栏收录该内容

9 篇文章 3 订阅

订阅专栏

v-model和v-bind有点类似，都是用来绑定标签属性的。但是v-model是表单控件操作，在其他标签是不好使。

简介

v-model是用来配合表单控件实现文字实时显示的效果（双向绑定效果）。

v-model基本使用

如下代码效果，修改了表单中的内容，p标签中的内容随着input输入框内容的变化而变化。

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>表单双向绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-6">
    <p>{{ message }}</p>
    <!--这里是重点-->
    <input v-model:value="message">
</div>

<script type="text/javascript">
    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

v-bind和v-model虽然都是动态设置属性的。但是v-model配合表单双向绑定效果。