vue的v-model指令

news/2024/7/9 23:39:15 标签: vue

作用：双向数据绑定，只能用于表单元素上

<body>
    <input id="test" type="text" v-model="entry">
    <script>
        let vm = new Vue({
            el:"#test",
            data:{
                entry:""
            }
        })
    </script>
</body>

在这里插入图片描述

可以从谷歌的控制器中看到，此时的input框跟entry属性是双向绑定的，一边的值发生改变时，另一边也会改变。

此效果类似于@input事件，达到的效果虽然相同，但原理不同，并且v-model更简单

v-model的修饰符（以下列举常用的）

lazy

在默认的情况下v-model每次input事件触发后将输入框里面的内容和数据进行同步
添加了lazy之后当失焦之后才会进行数据同步

number

默认情况下，在输入框中无论我们输入的是字母还是数字都会被当做字符串类型进
行处理。

但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理

number修饰符可以让在输入框中输入的内容自动转成数字类型

trim修饰符

如果输入的内容首尾有很多空格，我们希望去除首尾空格
可以使用trim

v-model的其他搭配

select (需要标签有value值)

    <div id="test">
        <select name=""  v-model="sel">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <span>{{ sel }}</span>
    </div>
    <script>
        let vm = new Vue({
            el:"#test",
            data:{
                sel:""
            }
        })
    </script>

在这里插入图片描述

可以看到select选中什么都会同步到sel属性

搭配input的checkbox属性且与数组连用

<div id="app">
        <input id="my" type="checkbox" value="马云" v-model="checked"/>
        <label for="my">马云</label>
        <input id="mht" type="checkbox" value="马化腾" v-model="checked"/>
        <label for="mht">马化腾</label>
        <input id="mdh" type="checkbox" value="马大哈" v-model="checked"/>
        <label for="mdh">马大哈</label>
        <div>
            {{ checked }}
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                checked:[],
            }
        })
    </script>