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

1.v-model

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

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

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

直接看代码

    <p>********v-model绑定数据源，实现双向绑定</p>
    <div>
      <p>v-model基本</p>
      <p>{{message}}haha</p>
      <p>v-model:<input type="text" v-model="message"></p>
      <p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
      <p>v-model.number:<input type="text" v-model.number="message"></p>
      <p>v-model.trim:<input type="text" v-model.trim="message"></p>
    </div>
    <p>文本区域双向绑定</p>
    <textarea cols="30" rows="10" v-text="message" v-model="message"></textarea>
    <br>
    <p>多选按钮绑定一个值</p>
    <input type="checkbox" id="haha" v-model="isTrue">
    <label for="haha">{{isTrue}}</label>
    <br>
    <p>多选绑定一个数组</p>
    <input type="checkbox" id="1" value="dukun" v-model="web_Names">
    <label for="1">dukun</label>
    <input type="checkbox" id="2" value="b" v-model="web_Names">
    <label for="2">shuage</label>
    <input type="checkbox" id="3" value="c" v-model="web_Names">
    <label for="3">shitailong</label>
    <p>{{web_Names}}</p>
    <br>
    <p>单选按钮绑定数据</p>
    <input type="radio" id="one" value="男" v-model="sex">
    <label for="one">男</label>
    <input type="radio" id="two" value="nv" v-model="sex">
    <label for="two">女</label>
    <p>{{sex}}</p>

2.v-bind

v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。

<div id="app">
    <img v-bind:src="imgSrc"  width="200px">
</div>

在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文件：

    <p>*******v-bind动态绑定标签上的属性(元素)</p>
    <p><img :src="imgSrc" alt="图片"></p>
    <a :href="url" target="_blank">链接到jspang</a>
    <p :class="className">1.绑定css</p>
    <p :class="{classA:isOk}">2.绑定css中的判断</p>
    <input type="checkbox" id="one" v-model="isOk">
    <label for="one">isOk: {{isOk}}</label>
    <hr>
    <p :class="[classA, classB]">3.绑定css数组</p>
    <p :class="isOk?classA:classB">4.绑定css三元运算符</p>
    <p :style="{color: red, fontSize: font}">5.绑定style</p>
    <p :style="styleObject">6.对象绑定style</p>
    <hr>

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'  
  }
}