Vue.js：v-model指令实现vue变量和表单标签的value属性双向绑定

1- v-model指令

实现vuejs变量和表单标签的value属性双向绑定

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

双向数据绑定

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

1.1在select下拉菜单中使用

v-model写在select上，value写在option上, Vue变量关联value属性的值

<template>
  <div>
    <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>
        <option value="武汉市">天津</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: ""
    }
  }
};
</script>

暂时只说用在表单元素上，组件之后会讲v-model高级用法

1.2在复选框使用

变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
需要注意的是：变量为数组, 则绑定的是他们的value属性里的值 - 可以收集勾选了的value值

<template>
  <div>
    <div
      style="display: inline-block"
      v-for="(item, index) in arr" :key="index"
    >
      <input type="checkbox" v-model="newArr" :value=item />
      <span>{{ item }}</span>
    </div>
    <p>选中的元素, 累加值为: {{sum}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
        //初始数据
      arr: [9, 25, 19, 96, 29, 31, 48, 57, 62, 79, 87],
        //选中复选框时，收集的value值，
      newArr: []
    }
  },
  computed: {
    sum(){
      return this.newArr.reduce((acc, value) => acc + value, 0)
    }
  }
};
</script>

因为数据双向绑定，相互影响，Vue变量初始值会影响表单的默认状态

2- 补充：v-model修饰符

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

• .number 以parseFloat转成数字类型
• .trim 去除首尾的空白字符
• .lazy 在change时触发而非input时