vue中v-model修飾符的使用和組件使用v-model

1.lazy 修飾器

lazy修飾器在input框中的表現效果是：
當你失去焦點后值才會跟新。
它的跟新時機是失去焦點后
這個修飾器在項目中運用的場景較少

<template>
    <div>
        <input class="input-demo" type="text" v-model.lazy="numberCont">
        <p>{{numberCont }}</p>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                numberCont:1,
            }
        }
    }
</script>

<style lang="scss" scoped>
.input-demo{
    height: 40px;
    width: 300px;
    border-radius: 4px;
    text-indent: 10px;
}
</style>

2.number 修飾器

number修飾器：
正常情況下，你在input框中輸入的都是字符串類型。
但是添加number修飾器后，可以將你在input框中輸入的字符變成數字類型；
注意：number修飾器並不可以限制input框中只能夠輸入數字；你輸入漢字。或者其他。
它只是將你輸入的【字符串類型的數字】類型轉換為【數字類型】僅此而已

<template>
    <div>
        <input class="input-demo" type="text" v-model.number="numberCont">
        <p>{{typeof numberCont }}</p>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                numberCont:1,
            }
        }
    }
</script>

3.trim修飾器

去除首尾的空格；但是不能夠去除中間的空格。
這個還是很常用的

<template>
    <div>
        <input class="input-demo" type="text" v-model.trim="numberCont">
        <p>=={{numberCont }}==</p>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                numberCont:'',
            }
        }
    }
</script>

4.總結

這個三個修飾器lazy、number、trim。
個人認為只有trim在開發的項目中使用的頻率很高
其他兩個感覺有點雞肋。
number如果只能夠限制用戶輸入數字的話，感覺還是挺好的。
但是卻不是這樣的

5.組件中使用v-model

其實在vue中v-model不僅可以使用在表單上
還可以使用在組件上面
可能細心的小伙伴平時都發現我們使用的第三方組件上有v-model
一起來看看怎么使用

6.組件使用v-model

<template>
 <div>
    <child-com v-model="msg"></child-com>
    <el-button @click="handerOK" primary>獲取值</el-button>
 </div>
</template>
<script>
import childCom from "@/components/child-com"
export default {
  name: 'App',
  data(){
    return {
      msg:'小甜甜'
    }
  },
  methods:{
    handerOK(){
        console.log(this.msg )
    },
  },
  components:{
    'child-com':childCom
  }
}
</script>

<style>
input{
    height: 40px;
    width: 300px;
    border-radius: 4px;
    text-indent: 10px;
}
</style>

組件

<template>
    <div>
        <!-- <h2>組件</h2> -->
        <input type="text" :value="value" @input="onInput">
    </div>
</template>

<script>
export default {
    props:['value'], 
    methods: {
        // input框中的值變化時，就會執行 onInput 事件
        onInput(e){
            // 想外傳遞的事件input是不變的，注意一下
            this.$emit('input',e.target.value)
        }
    },
}
</script>

7.如何需要綁定多個值咋辦

<template>
 <div>
    =========子組件=======
    <child-com v-model="msg" :name.sync="name"></child-com>
    <el-button @click="handerOK" primary>獲取值</el-button>
    <el-button @click="handerother" primary>獲取值</el-button>
 </div>
</template>
<script>
import childCom from "@/components/child-com"
export default {
  name: 'App',
  data(){
    return {
      msg:'小甜甜',
      name:'皮卡丘'
    }
  },
  methods:{
    handerOK(){
        console.log(this.msg )
    },
    handerother(){
        console.log(this.name )
    },
  },
  components:{
    'child-com':childCom
  }
}
</script>

子組件

<template>
    <div>
        <input type="text" :value="value" @input="onInput">
        <input type="text" :value="name" @input="otherInput">
    </div>
</template>
<script>
export default {
    props:['value','name'],
    methods: {
        // input框中的值變化時，就會執行 onInput 事件
        onInput(e){
            // 想外傳遞的事件input是不變的，注意
            this.$emit('input',e.target.value)
        },
        otherInput(e){
            // update在自定義時事件就是update。否者外界不能獲取值
            this.$emit('update:name',e.target.value)
        },
    },
}
</script>

如果你覺得我寫的還不錯的話，
跪求一個贊，感謝看官們！
這是我寫下去的動力