v-model双向绑定详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_55041880/article/details/118328319

v-model双向绑定

v-model.lazy="";失去焦点后更新
v-model.number="";只保留数字
v-model.trim="";去掉首尾空格
用v-model绑定一个数组在多选上时会按照多选的选中状态在数组中添加或删除该选项的value值

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <!-- v-modle对单选的使用 -->
        <input type="radio" v-model="sex" value="m" name="sex">男
        <input type="radio" v-model="sex" value="w" name="sex">女
        <span>当前选中{{sex}}</span>
        <!-- v-modle对多选的使用 -->
        <ul>
            <li v-for="(item,index) in arr" :key="index"
            >
                <input type="checkbox" name="" id="" :value="item" v-model="arr1" @click="show">
                {{item}}
            </li>
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        var vm = new Vue({
            el : ".app",
            data:{
                arr:[1,2,3,4],
                arr1:[],
                sex:"m"
            },
            methods: {
                show (){
                    console.log(this.arr1)
                }
            }
        })
    </script>
</body>
</html>