v-model与v-bind的区别

v-modle意思是在表单控件或者组件上创建双向绑定，比如输入框

<div>
    <input v-model="uname" />
    <input v-model="pwd" />
</div>

<script>
    var app = new Vue({
        data() {
            return {
                uname: '',
                pwd: ''
            }
        }
    })
</script>

更通俗的说法就是，在输入框使用了 v-model 指令，并且在 data 里面写相应的值，只要我在输入框输入了东西，vue 会立马把这些值给同时放在 data 里面。

v-mode 官方文档地址:https://cn.vuejs.org/v2/api/#v-model

v-bind 的意思是绑定一个或多个 attribute，比如：

<div v-bind:class="demo" v-bind:style="{height: 100 + 'px'}">
    <img v-bind:src="url" />

    <script>
        var app = new Vue({
            data() {
                return {
                    url: 'http://localhost/img/gurasssss.jpg'
                }
            }
        })
    </script>
</div>

更通俗的说法是，v-bind 绑定了标签的属性，如果 data 的值变化了，那么相应地被绑的的标签的属性值也会变化。

v-bind 官方文档地址:https://cn.vuejs.org/v2/api/#v-bind

v-model与v-bind的区别

推荐阅读