v-model ,vue指令

这里例举了两个 v-model的例子 :

1.语法:v-model.修饰符="vue数据变量"

目标: 把value属性和vue数据变量, 双向绑定到一起

语法: v-model="vue数据变量"

双向数据绑定:

数据变化 -> 视图自动同步

视图变化 - > 数据自动同步

演示:用户名绑定 -vue 内部是 mvvm 设计模式

例:

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    <div>
      <span>来自于: </span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        &