Vue.js教程(六):v-model表单操作

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配合表单双向绑定效果。

学习前端最好的方式就是动手用一用,效果出来了就明白了。

发布了93 篇原创文章 · 获赞 115 · 访问量 23万+

猜你喜欢

转载自blog.csdn.net/muyi_amen/article/details/84107355