vue中v-bind绑定的作用以及与v-model的区别

什么是v-bind指令
在VUE开发中如果想要给“元素”绑定数据，我们可以使用{{}}，v-text，v-html，但是如果想给“元素的属性”绑定数据，就必须使用v-bind，所以v-bind的作用是专门用于给“元素的属性”绑定数据。

v-bind格式
v-bind:属性名称 = “绑定的数据”
:属性名称 = “绑定的数据”

3、v-bind特点
赋值的数据可以是任意一个合法的JS表达式，例如：:属性名称 = “age+1”


在html代码中，v-bind绑定的是动态的表达式，而非固定的字符串，在v-bind后，就可以动态获取数据。可以将v-bind理解为： 被v-bind修饰的都是动态获取的值。  而非被v-bind修饰的，仅仅是一个字符串。

例如 :
v-bind:todo="item"; 在此例子中 item是一个表达式，item可以在其他地方动态变化；

todo="item"   在此例子中，item是一个字符串，不代表其他任何意义。

v-model和v-bind区别

Vue中的数据绑定

绑定数据有三种方式：

插值，也就是{{name}}的形式，以文本的形式和实例data中对应的属性进行绑定

v-bind：

v-model：

当加上v-bind:之后，它的值classe不是字符串，而是vue实例对应的data.classed这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。他只是单向变动

v-bind支持的类型
html中的属性、css的样式、对象、数组、number 类型、bool类型

v-bind使用：
// 绑定文本
<p v-bind="message"></p>

// 绑定属性
<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

// 绑定表达式
:class{className:true}

v-model
主要是用在表单元素中，它实现了双向绑定。在同事使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的<input>中实现双向绑定。

<input v-model="something">
————————————————