Vue绑定数据那些事

1、input:type="text"的绑定

在input中写入v-model=".."，在data中定义一下，就实现了数据绑定，很容易吧！textarea用法类似。

<template>
   <label>博客标题</label>
   <input type="text" v-model="blog.title" required />
</template>

export default {
  name: 'add-blog',
  data () {
    return {
      blog:{
        title:"",
      }
    }
  }
}

2、input:type="checkbox"的绑定

如果有多个选项需要选择，当然是希望选择完哪个之后可以显示我们所选的内容。那么这个怎么实现呢？看下面代码，有4个checkbox选项，在每一个input后面添加一个数据绑定，绑定的内容是一个数组，也需要事先在data中定义一下，为什么使用数组呢？因为选择不是单一的，我们希望选择的都可以显示出来，那么就使用数组存起来。

<div id="checkboxes">
     <label>Vue.js</label>
     <input type="checkbox" value="Vue.js" v-model="blog.categories">
     <label>Node.js</label>
     <input type="checkbox" value="Node.js" v-model="blog.categories">
     <label>React.js</label>
     <input type="checkbox" value="React.js" v-model="blog.categories">
     <label>Angular4.js</label>
     <input type="checkbox" value="Angular4.js" v-model="blog.categories">
</div>

export default {
  name: 'add-blog',
  data () {
    return {
      blog:{
        categories:[]
      }
    }
  }
}

3、select下拉选择的绑定

下拉选择某个后，希望显示的是自己所选的内容，需要在select上绑定，然后option遍历数组取值。

<label>作者:</label>
<select v-model="blog.author">
    <option v-for="author in authors">{{author}}</option>
</select>

export default {
  name: 'add-blog',
  data () {
    return {
      blog:{
        author:""
      },
      authors:["tt","wf","ll"]
    }
  }
}

以上代码的效果一开始的时候下拉框是空的，只有点击下拉箭头才会出现内容。如何显示一个默认值呢？如下，只需要加一个钩子函数，赋一个初始值保持默认状态。

created(){
    this.blog.author = 'tt';
}