v-model和v-bind绑定数据对比

最新推荐文章于 2023-03-05 14:23:08 发布

阿旺你好啊

最新推荐文章于 2023-03-05 14:23:08 发布

阅读量174

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43803985/article/details/97676212

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

v-model会忽略所有表单元素的value、checked和selected特性的初始值，vue.js会选择实例数据作为具体的值

v-bind不能进行数据的双向绑定，即在网页中可以获取到data的中的值，但不能更改控件上的值

实例

<!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>数据双向绑定</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h4>{{msg}}</h4>
 <!-- v-bind只能数显数据的单向绑定，从M自动绑定到v 无法实现数据的双向绑定 -->
 <p>使用v-bind</p>
    <input type="text" v-bind:Value="msg" style="width: 100%;" placeholder="1">

    <p>使用v-model</p>
    <input type="text" v-model="msg" style="width: 100%;" pla>
    </div>
   

    <script>
        var vm =new Vue({
            el:'#app',
            data: {
                msg:'我是一个最好的程序员'

            },
            methods: {     

            }
        });
        </script>
</body>
</html>

运行界面
使用v-bind修改文本框的值，并不会修改显示元素的值
v-bind
使用v-model修改文本框的值,显示元素值会相应改变
v-model
这就是数据的双向绑定效果

阿旺你好啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model和v-bind绑定数据对比

v-model会忽略所有表单元素的value、checked和selected特性的初始值，vue.js会选择实例数据作为具体的值v-bind不能进行数据的双向绑定，即在网页中可以获取到data的中的值，但不能更改控件上的值实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
复制链接

扫一扫

专栏目录