6.1 基本用法

v-model:

VUE提供了v--model指令， 用于在表單類元素上雙向綁定事件

input和textarea

可以用于input框，以及textarea等
注意： 所顯示的值只依賴于所綁定的數(shù)據(jù)，不再關(guān)心初始化時(shí)的插入的value

<!--只要使用了v-model綁定了數(shù)據(jù)，你初始化顯示的值，都只與你在data里對應(yīng)的屬性的值有關(guān)，與其他無關(guān)-->
輸入框:<input type="text" v-model="msg"> <br>
{{msg}} <br>
多行文本：<textarea name="" id="" cols="30" rows="10" v-model="value">當(dāng)你使用v-model綁定了數(shù)據(jù)我就不會(huì)顯示</textarea>
{{value}}

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

單選按鈕：

1. 單個(gè)單選按鈕，直接用v--bind綁定一個(gè)布爾值，用v-model是不可以的

單個(gè)單選按鈕： <input type="radio" :checked="checked">
data: {
  checked: false
}

2. 如果是組合使用，就需要v--model來配合value使用，綁定選中的單選框的value值，此處所綁定的初始值可以隨意給

多個(gè)單選按鈕：（v-model綁定的是被選中的單選按鈕的value值，就比如下面data里的checkvalue是大毛，那么就是默認(rèn)選中大毛）
<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: '大毛'
}

復(fù)選框

1. 單個(gè)復(fù)選框，直接綁定一個(gè)布爾值，可以用v--model可以用v-bind

單個(gè)復(fù)選框：--用v-bind:<input type="checkbox" :checked="checked"> <br>
單個(gè)復(fù)選框：--用v-model:<input type="checkbox" v-model="checked"> <br>

data: {
  checked: true
}

2. 多個(gè)復(fù)選框– 如果是組合使用，就需要v--model來配合value使用，v--model綁定一個(gè)數(shù)組—如果綁定的是字符串，則會(huì)轉(zhuǎn)化為true和false，與所有綁定的復(fù)選框的checked屬性相對應(yīng)

多個(gè)復(fù)選框： <br>
<input type="checkbox" value="大毛" v-model="checkboxs"> 大毛
<input type="checkbox" value="二毛" v-model="checkboxs"> 二毛
<input type="checkbox" value="三毛" v-model="checkboxs"> 三毛 <br>
現(xiàn)在選中了：{{checkboxs}}
data: {
  checkboxs: ''
}

上面v-model綁定的checkboxs是一個(gè)字符串，所以在頁面中與之對應(yīng)的{{checkboxs}}里面顯示的是checked的屬性，選中的情況下就是true否則就是false

image.png

data: {
  checkboxs: []
}

上面代碼如果你綁定的checkboxs是數(shù)組，那么頁面就會(huì)顯示對應(yīng)的復(fù)選框的value

image.png

下拉框：

1. 如果是單選，所綁定的value值初始化可以為數(shù)組，也可以為字符串，有value直接優(yōu)先匹配一個(gè)value值，沒有value就匹配一個(gè)text值
2. 如果是多選，就需要v--model來配合value使用，v--model綁定一個(gè)數(shù)組，與復(fù)選框類似
3. v--model一定是綁定在select標(biāo)簽上

下拉框： <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

總結(jié)一下：

如果是單選，初始化最好給定字符串，因?yàn)関--model此時(shí)綁定的是靜態(tài)字符串或者布爾值
如果是多選，初始化最好給定一個(gè)數(shù)組

6.2 綁定值

• 單選按鈕
  只需要用v--bind給單個(gè)單選框綁定一個(gè)value值，此時(shí)，v-model綁定的就是他的value值

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

上面代碼{{inputValue}}一開始渲染為true，當(dāng)你選中按鈕就變成了1111

image.png

• 復(fù)選框
  通過true-value和false-value來設(shè)置選中的時(shí)候和未選中時(shí)的value值

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

上面代碼默認(rèn)一開始打開頁面復(fù)選框被選中，{{picked}}的值為true，當(dāng)點(diǎn)擊復(fù)選框的時(shí)候取消選中狀態(tài){{picked}}變?yōu)椤覜]被選中’，再次點(diǎn)擊選中，值為‘我被選中了’

• 下拉框
  在select標(biāo)簽上綁定value值對option并沒有影響

6.3 修飾符

• lazy
  v--model默認(rèn)是在input輸入時(shí)實(shí)時(shí)同步輸入框的數(shù)據(jù)，而lazy修飾符，可以使其在失去焦點(diǎn)或者敲回車鍵之后再更新

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

• number
  將輸入 的字符串轉(zhuǎn)化為number類型

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

上面代碼盡管你輸入的是數(shù)字，但實(shí)際上input里面的都是字符串

image.png

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

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

image.png

• trim
  trim自動(dòng)過濾輸入過程中收尾輸入的空格

<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"/>
// 等價(jià)于
//<Child :count="count" @update:count="count = $event"/>
// 等價(jià)于
<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">點(diǎn)我</button>
  </div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    count: {
      type: Number
    },
  },
  methods: {
    handleChange() {
      this.$emit('update:count', 2)
    }
  }
}
</script>