vue表单绑定v-model 

<!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 id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                message: "",
            },
            
        })

    </script>
</body>
</html>

model修饰符

<!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 id="app">
        <!-- lazy修饰， 失去焦点时绑定 -->
        <input type="text" v-model.lazy="message">
        <h3>{{message}}</h3>

        <!-- number修饰符 -->
        <input type="number" v-model.number="age">
        <h3>{{typeof age}} {{age}}</h3>

        <!-- trim修饰符  去除两边空格-->
        <input type="text" v-model.trim="name">
        <h3>{{name}}</h3>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                message: "",
                age:"",
                name:""
            },
            
        })

    </script>
</body>
</html>

model和checkbox

<!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 id="app">
        <label for="agree">
            <input type="checkbox" id="agree"  v-model="isagree"> 同意协议
        </label>

        <h3>你选择的：{{isagree}}</h3>
        <button :disabled="!isagree">下一步</button>




        ////多选框
        <input type="checkbox" id="" value="篮球" v-model="hobbies"> 篮球
        <input type="checkbox" id="" value="足球" v-model="hobbies"> 足球
        <input type="checkbox" id="" value="乒乓球" v-model="hobbies"> 乒乓球
        <input type="checkbox" id="" value="羽毛球" v-model="hobbies"> 羽毛球
        <h3>你的爱好{{hobbies}}} </h3>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                message: "",
                isagree: false,
                hobbies: []
            },
            // 有v-model时
        })

    </script>
</body>
</html>

 

model和radio

<!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 id="app">
        <label for="male">
            <input type="radio" id="male" name="sex" value="男" v-model="sex"> 男
        </label>
        <label for="female">
            <input type="radio" id="female" name="sex" value="女" v-model="sex"> 女
        </label>

        <h3>你选择的性别：{{sex}}</h3>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                message: "",
                sex: "男",
            },
            // 有v-model时可省略name也是互斥， 变量sex有默认值则radio直接有默认选项 
        })

    </script>
</body>
</html>

 

model和select

<!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 id="app">
        <!-- 单选 -->
        <select name="abc" v-model="fruit">
            <Option value="苹果" >苹果</Option>
            <Option value="香蕉"  >香蕉</Option>
            <Option value="葡萄" >葡萄</Option>
            <Option value="橙子">橙子</Option>
        </select>

        <h3>选择的水果是：{{fruit}}</h3>


        <!-- 多选 -->
        <select name="abc" v-model="fruits" multiple>
            <Option value="苹果" >苹果</Option>
            <Option value="香蕉"  >香蕉</Option>
            <Option value="葡萄" >葡萄</Option>
            <Option value="橙子">橙子</Option>
        </select>

        <h3>选择的水果是：{{fruits}}</h3>


    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                
                fruit: "苹果",
                fruits: []

            }
            // 有v-model时
        })

    </script>
</body>
</html>

 

posted @ 2023-03-14 10:58  Wchime  阅读(23)  评论(0)    收藏  举报