What is the difference between v-bind and v-model in vue2

1. The difference between v-model and v-bind

1. v-bindYes 单向绑定, it is used to bind data and attributes and expressions, and can only vuesynchronize the data in the page to the page.
2. v-modelYes 双向绑定, not only can vuethe data in be synchronized to the page, but also the data of user data can be assigned to vuethe properties in.
3. v-bindIt can be given 任何属性赋值; v-modelit can only be given to value属性the elements that have it 数据双向绑定.

Two, v-model

v-model is mostly used in forms, creating two-way bindings on form elements, selecting the correct method to update elements according to the control type, and bindingtext、radio、checkbox、selected

Three, v-bind

1. Binding text: use directly v-bindor{ {}}

   <p v-bind="mgs"></p>
   <p>{
        
        { mgs }}</p>
   

2. bind property

   <img v-bind:src="'//www.baidu.com/img/flexible/logo/pc/result.png'" />
   <div v-bind:class="'className'">class</div>
   <div v-bind:style="{color: 'red'}">class</div>
   <p>---------------------------------------------</p>
   <img :src="'//www.baidu.com/img/flexible/logo/pc/result.png'" />
   <div :class="'className'">class</div>
   <div :style="{color: 'red'}">class</div>
   

3. binding expression

   {
        
        { number + 1 }}
   {
        
        { isTrue ? 'a' : 'b' }}
   {
        
        { msg.split('').reverse().join('') }}
   

4. Binding html: Three must be used at this time{}

   {
        
        {
        
        {'<div style="color: red;">test</div>'}}}
   

5. v-bindMultiple properties can be bound at the same time

   <CT v-bind="bindmodal"></CT>
   <CT v-bind:a="bindmodal.a"></CT>
   <CT :a="bindmodal.a" :b="bindmodal.b"></CT>