【基础17】表单数据的双向绑定-修饰符

czh 7/6/2021 vue3vue3基础双向绑定-修饰符

# 【基础17】表单数据的双向绑定-修饰符

来看一下v-model（数据双向绑定）中的修饰符。

# 补充：

# checkbox里的true-value和false-value

之前做了复选框选择true和false的情况

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo23</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                checked: true,
            }
        },

        template: `
        <div>{{checked}}<input type="checkbox" v-model="checked" /></div>
        `

    })
    const vm = app.mount("#app")

</script>

</html>

在浏览器中预览时，当选择复选框时，会显示true，没选中显示false。

现在的需求是，我选中的时候显示uncle_chan，没选中的时候显示陈叔叔。这时候要如何处理呢？

Vue给我们提供了这样两个属性true-value和false-value。我们在Data中新声明一个变量name,值为空字符串。

data() {
    return {
    	checked: true,
		name:''
    }
},

这时候在模板中编写下面的代码。

template: `
<div>{{name}}
    <input 
        type="checkbox" 
        v-model="name"  
        true-value="uncle_chan"
        false-value="陈叔叔"
        /></div>
`

这时候到浏览器中预览，就可以看到，在选择时插值表达式会变成uncle_chan，在没选中时会变成陈叔叔。

补充的部分就到这里了

# v-model数据双向绑定

lazy修饰符

v-model也有很多实用的修饰符，现在就学习一下。第一个修饰符lazy，这个也叫做懒更新修饰符。

我们作一个input的绑定效果,现在data中声明一个message变量，值为空。然后在模板中写一个<input />并和message进行双向数据绑定。

data() {
    return {
        checked: true,
        name: '',
        message:'',
    }
},

模板中进行双向数据绑定：

<div>
    {{message}}<input v-model="message" />
</div>

这时候当你在文本框中输入任何内容的时候，插值表达式会跟着改变。如果你不想马上显示，就可以用lazy修饰符，这样就可以实现当输入完成后，失去焦点再进行改变。

<div>
    {{message}}<input v-model.lazy="message" />
</div>

写完lazy修饰符后，可以看一下效果，这时候的效果就和我们想象的一样了。

number修饰符

<input />输入的内容无论是数字还是字母，最终都会变为字符串。如果想最终输入的变成数字，你就可以使用number修饰符了。

比如我们现在去掉lazy修饰符，直接输入数字，这时候你修改插值表达式的结果，输出当前类型。

<div>
    {{typeof message}}<input v-model="message" />
</div>

这时候你预览，就会发现最终input绑定的值会变成字符串类型。这是html的底层逻辑造成的，这时候我们可以使用number修饰付，解决这个问题。加上number修饰符后，你输入的值只要是数字，就变成了number类型。（也就是说，如果你输入的是字母，它还会是字符串类型）

<div>
    {{typeof message}}<input v-model.number="message" />
</div>

trim修饰

trim修饰符大家一定不陌生，它是用来消除input框输入内容前后的空格的。现在我们再字符串上输入空格，其实它会在DOM元素上进行增加空格的，这个可以在控制台清楚的看出。加入trim修饰符后，Vue就会自动给我们去除前后的空格。

现在data中新声明一个变量，比如叫做message1。

data() {
    return {
        //......
        message1: '陈叔叔啊'
    }
},

用法如下:

<div>
    {{message1}}<input v-model.trim="message1" />
</div>

这时候Vue就会自动为我们去除前后空格，但不会去除字符串中间的空格。

前端极客

Choose mode