VUE指令及用法大全——（四）v-model 双向数据绑定

最新推荐文章于 2024-07-29 09:05:38 发布

最初都是小白

最新推荐文章于 2024-07-29 09:05:38 发布

阅读量393

点赞数 1

分类专栏： Vue 文章标签： v-model vue双向数据绑定双向数据绑定

本文链接：https://blog.csdn.net/Originally_M/article/details/89673013

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

语法：v-model:

使用时请注意：

1. v-model 只能和表单元素进行绑定
2. v-model 是vue中唯一支持双向绑定的指令

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       <p>{{msg}}</p>
       <hr>
        <!-- v-bind: 只能实现单项的数据绑定  data====》view -->
        <!-- <input type="text" :value="msg"> -->


        <!-- v-model: 实现双项的数据绑定  data《====》view -->
       <input type="text" v-model="msg">
    </div>
	<script>
	    var vm = new Vue({
	            el:'#app',
	            data:{
	                msg:'123',
	            },
	            methods: {
	            }
	    })
	</script>
</body>
</html>