6. v-­model 和 .sync

6.1 基本用法

v-model:

VUE提供了v­-model指令， 用于在表单类元素上双向绑定事件

input和textarea

可以用于input框，以及textarea等
注意： 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value

<!--只要使用了v-model绑定了数据，你初始化显示的值，都只与你在data里对应的属性的值有关，与其他无关-->
输入框:<input type="text" v-model="msg"> <br>
{{msg}} <br>
多行文本：<textarea name="" id="" cols="30" rows="10" v-model="value">当你使用v-model绑定了数据我就不会显示</textarea>
{{value}}

data: {
  msg: '输入你的信息',
  value: ''
}

单选按钮：

1. 单个单选按钮，直接用v-­bind绑定一个布尔值，用v­model是不可以的

单个单选按钮： <input type="radio" :checked="checked">
data: {
  checked: false
}

2. 如果是组合使用，就需要v-­model来配合value使用，绑定选中的单选框的value值，此处所绑定的初始值可以随意给

多个单选按钮：（v-model绑定的是被选中的单选按钮的value值，就比如下面data里的checkvalue是大毛，那么就是默认选中大毛）
<input type="radio" name="checks" value="大毛" v-model="checkvalue">大毛 
<input type="radio" name="checks" value="二毛" v-model="checkvalue">二毛 
<input type="radio" name="checks" value="三毛" v-model="checkvalue">三毛  <br>
{{checkvalue}}

data: {
  checkvalue: '大毛'
}

复选框

1. 单个复选框，直接绑定一个布尔值，可以用v-­model可以用v­bind

单个复选框：--用v-bind:<input type="checkbox" :checked="checked"> <br>
单个复选框：--用v-model:<input type="checkbox" v-model="checked"> <br>

data: {
  checked: true
}

2. 多个复选框– 如果是组合使用，就需要v-­model来配合value使用，v-­model绑定一个数组—如果绑定的是字符串，则会转化为true和false，与所有绑定的复选框的checked属性相对应

多个复选框： <br>
<input type="checkbox" value="大毛" v-model="checkboxs"> 大毛
<input type="checkbox" value="二毛" v-model="checkboxs"> 二毛
<input type="checkbox" value="三毛" v-model="checkboxs"> 三毛 <br>
现在选中了：{{checkboxs}}
data: {
  checkboxs: ''
}

上面v-model绑定的checkboxs是一个字符串，所以在页面中与之对应的{{checkboxs}}里面显示的是checked的属性，选中的情况下就是true否则就是false

image.png

data: {
  checkboxs: []
}

上面代码如果你绑定的checkboxs是数组，那么页面就会显示对应的复选框的value

image.png

下拉框：

1. 如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优先匹配一个value值，没有value就匹配一个text值
2. 如果是多选，就需要v-­model来配合value使用，v-­model绑定一个数组，与复选框类似
3. v-­model一定是绑定在select标签上

下拉框： <br>
单选下拉框： <br>
<select v-model="selected">
  <option value="大毛">大毛</option>
  <option value="二毛">二毛</option>
  <option value="三毛">三毛</option>
</select>
你选中的是：{{selected}}
<br>
<br>
多选下拉框： <br>
<select v-model="selectedmul" multiple>
  <option value="大毛">大毛</option>
  <option value="二毛">二毛</option>
  <option value="三毛">三毛</option>
</select>
你选中的是：{{selectedmul}}
data: {
  selected: '',
  selectedmul: []
}

image.png

总结一下：

如果是单选，初始化最好给定字符串，因为v-­model此时绑定的是静态字符串或者布尔值
如果是多选，初始化最好给定一个数组

6.2 绑定值

• 单选按钮
  只需要用v-­bind给单个单选框绑定一个value值，此时，v­model绑定的就是他的value值

<input type="radio" v-model="inputValue" :value="value"> {{inputValue}}
data: {
  inputValue: true,
  value: '1111'
}

上面代码{{inputValue}}一开始渲染为true，当你选中按钮就变成了1111

image.png

• 复选框
  通过true-value和false-value来设置选中的时候和未选中时的value值

<input type="checkbox" v-model="picked" :true-value="value1" :false-value="value2">
-----{{picked}}
data: {
  picked: true,
  value1: '我被选中了',
  value2: '我没被选中'
}

上面代码默认一开始打开页面复选框被选中，{{picked}}的值为true，当点击复选框的时候取消选中状态{{picked}}变为‘我没被选中’，再次点击选中，值为‘我被选中了’

• 下拉框
  在select标签上绑定value值对option并没有影响

6.3 修饰符

• lazy
  v-­model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其在失去焦点或者敲回车键之后再更新

<input v-model.lazy="msg" >
{{msg}}

• number
  将输入 的字符串转化为number类型

<input v-model="msg" >
{{msg}}

上面代码尽管你输入的是数字，但实际上input里面的都是字符串

image.png

如果想要得到number类型，就要使用

<input v-model.number="msg" >

image.png

• trim
  trim自动过滤输入过程中收尾输入的空格

<input v-model.trim="msg">

自定义组件中的使用

• 父组件

<test v-model="childName"/>
<script>
  export default {
      data() {
        return { childName: '2222'}
      }
  }
</script>

• 子组件

<template>
  <div>
    <input :value="current" @input="onInput"/>
  </div>
</template>
<script>
export default {
  name: 'Test',
  model: {
    prop: 'current',
    event: 'input'
  },
  props: {
    current: String
  },
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>

.sync

• 父组件

<template>
  <div>
    Test
    <Child :count="count" @update:count="updateCount"/>
// 等价于
//<Child :count="count" @update:count="count = $event"/>
// 等价于
<Child :count.sync="count" />
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  name: 'Test',
  components: {
    Child,
  },
  data() {
    return {
      count: 0,
    }
  },
  created() {

  },
  methods: {
    updateCount(count) {
      this.count = count
    }
  }
}
</script>

• 子组件

<template>
  <div>
    <div>{{count}}</div>
    <button @click="handleChange">点我</button>
  </div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    count: {
      type: Number
    },
  },
  methods: {
    handleChange() {
      this.$emit('update:count', 2)
    }
  }
}
</script>