这节课我们学习的内容是数据双向绑定，在vue中我们修改一个变量的值对应依赖的界面也会及时响应发生变化，这是我们经常提到的数据驱动界面，那什么是数据双向绑定呢。我们通过修改变量让界面同步数据，这叫单向绑定，反过来我们还可以通过界面来修改数据让变量自动同步，这种同时绑定同时响应的特性，就叫数据双向绑定。 通过这节课的学习我们可以对数据双向绑定有个更好的理解。

直接开始吧，先来新建一个demo21.html文件，复制一下hello world代码。

一个简单数据双向绑定

我们先来改造一下template模板，我们想要在界面去修改变量，无非就是通过input这些表单输入控件去实现。所以我们在template里面来添加一个<input/>，然后来修改一下message把这个变量改成name，改不改也无所谓，只是让它看起来更像一个表单的字段。然后再template也要把它改成name，顺便咱们再用一个div来包裹一下。

const app = Vue.createApp({
    data() {
      return {
        name: "hello world!"
      }
    },
    template: `
      <div>
        <div>{{name}}</div>
        <input/>
      </div>`
  })

在input上使用 v-model 把变量name就给它绑定上。

  <input v-model="name" />

这样就实现了一个最简单的数据双向绑定，我们打开浏览器看看效果。

一打开，input里面就被填充了变量name的值，这时候在input里面修改一下，我们看到外面渲染hello world 也会随之改变，这就表示变量name的值和input输入值被绑定在了一起。已经是一条船上的蚂蚱了。

textarea数据双向绑定

v-model 支持绑定所有form表单输入控制，我来看看 textarea 绑定的效果。

在template中，我们再来添加一个 textarea 同样我们也用textarea给它绑定上name，为了成行显示，我们再给它套个div。

template: `
      <div>
        <div>{{name}}</div>
        <div><input v-model="name" /></div>
        <div><textarea v-model="name"/></div>
      </div>`

checkbox数据双向绑定

checkbox 复选框它只支持两种值，true和false。我们新添加一个变量checked 默认false（未选中），然后在template中来添加一个checkbox，把它和checked变量进行数据双向绑定，在旁边顺便再渲染出来方便观察它的变化。

template: `
      <div>
        <div>{{name}}</div>
        <div><input v-model="name" /></div>
        <div><textarea v-model="name"/></div>
        <div>{{checked}}<input type="checkbox" v-model="checked"/></div>
      </div>`

另外checkbox数据双向绑定 也支持多选，注释template，重新写一个。我们写一堆选项，

比如以兴趣爱好的选项来举个例子，分别弄几个选项意思意思就行。然后我们还要来添加一个变量 likes 它得是一个数组因为是多选嘛，所以得是一个数组，然后都给每一个checkbox绑定起来就行了

template:`
      <div>
        <div>{{likes}}</div>
        钓鱼<input type="checkbox" v-model="likes" value="钓鱼"/>
        游泳<input type="checkbox" v-model="likes" value="游泳"/>
        打篮球<input type="checkbox" v-model="likes" value="打篮球"/>
        看电影<input type="checkbox" v-model="likes" value="看电影"/>
      </div>
`

看看效果吧。

radio数据双向绑定

这个我们不多举例子了，居然checkbox我都做了，做一个单项那还不简单，直接把checkbox改成radio，但是因为是单项，我们就没有必要它绑定一个数组了，我们重新来添加一个变量，like 是个空字符串 把likes换成like行了。

template:`
      <div>
        <div>{{like}}</div>
        钓鱼<input type="radio" v-model="like" value="钓鱼"/>
        游泳<input type="radio" v-model="like" value="游泳"/>
        打篮球<input type="radio" v-model="like" value="打篮球"/>
        看电影<input type="radio" v-model="like" value="看电影"/>
      </div>
    `

select下拉选择框数据双向绑定

我们再来看一下 select 数据双向绑定，学到这了大家应该都能实现了吧，我们再一起来做一个。先来写一个选择框，给它和like进行双向绑定。 在上面渲染like看一下结果。

template:`
          <div>{{like}}</div>
          <select v-model="like">
            <option>钓鱼</option>
            <option>游泳</option>
            <option>打篮球</option>
          </select>  
        `

好了，就先到这吧，改天我们继续。