vue中v-bind与v-model指令详解

1.v-model

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

经常和{{}}胡子语法配合在html中使用， 

ps: {{}} === v-text

直接看代码

    
********v-model绑定数据源，实现双向绑定
    

      
v-model基本
      
{{message}}haha
      
v-model:
      
v-model.lazy:
      
v-model.number:
      
v-model.trim:
    
    
文本区域双向绑定
    
    

    
多选按钮绑定一个值
    
    {{isTrue}}
    

    
多选绑定一个数组
    
    dukun
    
    shuage
    
    shitailong
    
{{web_Names}}
    

    
单选按钮绑定数据
    
    男
    
    女
    
{{sex}}

2.v-bind

v-bind是处理HTML中的标签属性的，例如

就是一个标签，也是一个标签，我们绑定上的src进行动态赋值。

在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。

    data () {
        return () {
          imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
        }
     }

 v-bind缩写为： 

还可以绑定css样式

html文件：

    
*******v-bind动态绑定标签上的属性(元素)
    

    链接到jspang
    
1.绑定css
    
2.绑定css中的判断
    
    isOk: {{isOk}}
    

    
3.绑定css数组
    
4.绑定css三元运算符
    
5.绑定style
    
6.对象绑定style
    

js文件：

data () {
  return () {
    imgSrc: 'http://7xjyw1.com1.z0.glb.clouddn.com/bbbb_20180818070432.png',
    url: 'http://jspang.com/2017/02/23/vue2_01/',
    className: 'classA',
    isOk: true,
    classA: 'classA',
    classB: 'classB',
    red: 'red',
    font: '200%',
    styleObject: {color: 'red', fontSize: '200%'},
    msg1: 'helloWorld'  
  }
}