vue指令v-model的双向绑定

介绍

v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令。

绑定输入

表单的value与v-model中的变量绑定

   <div>
      <span>用户名:</span>
      //value会存入变量
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>

绑定选择

如果变量from的值与选项的value一致，下拉菜单会默认选中该选项；如果select的value发生改变，from的值也会改变。

    <div>
      <span>来自于哪里?</span>
      <select v-model="from">
        <option value="西安">陕西-西安</option>
        <option value="燕京">北京-燕京</option>
        <option value="大连">辽宁-大连</option>
      </select>
    </div>

多选框绑定

checkbox特殊, 内部判断v-model是数组，如果变量有值，表单value与变量值一致的表单会被默认选中，如果没有值，被勾选中的表单的value会添加到变量中。

    <div>
      <!-- checkbox特殊, 内部判断v-model是数组, 绑定value值 -->  
      <span>爱好</span>
      <input type="checkbox" v-model="hobby" value="吃饭" /><span>吃饭</span>
      <input type="checkbox" v-model="hobby" value="逛街" /><span>逛街</span>
      <input type="checkbox" v-model="hobby" value="旅游" /><span>旅游</span>
    </div>

如果v-model与表单建立了双向绑定，变量的值会跟据表单的value而改变。