Vue.js--表单绑定数据、修饰符详解

最新推荐文章于 2024-04-07 07:22:40 发布

吴声子夜歌

最新推荐文章于 2024-04-07 07:22:40 发布

阅读量729

点赞数 4

分类专栏： Vue.js 文章标签： Vue.js 表单绑定数据修饰符

本文链接：https://blog.csdn.net/cold___play/article/details/102495643

版权

Vue.js 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

单行输入框

<div id="myApp">
    <h1>表单控件绑定</h1>
    <input type="text" v-model="message" placeholder="编辑栏">
    <p>Message is: {{message}}</p>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            message: "我爱马里奥",
        },
        methods: {

        }
    });
</script>

在这里插入图片描述

复选框

<div id="myApp">
    <h1>表单复选框</h1>
    <input type="checkbox" id="生化危机" value="生化危机" v-model="checkedGames">
    <label for="生化危机">生化危机</label>
    <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
    <label for="模拟飞行">模拟飞行</label>
    <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
    <label for="塞尔达传说">塞尔达传说</label>
    <br>
    <p>您的选择是：{{checkedGames}}</p>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            checkedGames: []
        }
    });
</script>

在这里插入图片描述

单选按钮

<div id="myApp">
    <h1>表单单选按钮</h1>

    <h3>选择性别</h3>
    <input type="radio" id="male" value="男" v-model="pickedSex">
    <label for="male">男</label>
    <br>
    <input type="radio" id="female" value="女" v-model="pickedSex">
    <label for="female">女</label>


    <h3>选择爱好</h3>
    <input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
    <label for="game">玩游戏</label>
    <br>
    <input type="radio" id="movie" value="看电影" v-model="pickedHobby">
    <label for="movie">看电影</label>

    <h3>选择结果</h3>
    <p>性别：{{pickedSex}}</p>
    <p>爱好：{{pickedHobby}}</p>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            pickedSex: "",
            pickedHobby: ""
        }
    });
</script>

在这里插入图片描述

下拉框

<div id="myApp">
    <h3>你最喜欢的NBA球星是：</h3>
    <select v-model="likedNBAStar" style="widows: 20px;">
        <option>科比</option>
        <option>詹姆斯</option>
        <option>哈登</option>
        <option>库里</option>
        <option>杜兰特</option>
    </select>


    <h3>我的全明星：</h3>
    <select v-model="likedNBAStars" multiple style="width: 210px; height:210px;">
        <option>阿德脱昆博</option>
        <option>怀特塞德</option>
        <option>阿尔德里奇</option>
        <option>戴维斯</option>
        <option>格里芬</option>
        <option>詹姆斯</option>
        <option>哈登</option>
        <option>库里</option>
        <option>杜兰特</option>
        <option>欧文</option>
        <option>保罗</option>
        <option>韦德</option>
        <option>德罗赞</option>
        <option>林书豪</option>           
    </select>


    <h3>我的选择结果</h3>
    <p>我最喜欢：{{likedNBAStar}}</p>
    <p>我的全明星：{{likedNBAStars}}</p>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            likedNBAStar: "",
            likedNBAStars: []
        }
    });
</script>

在这里插入图片描述

修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>表单修饰物</title>
</head>
<body>
    <!--
        .lazy：用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量
        .number：将用户输入的内容转换为数值类型，如果用户输入非数值的时候，返回NaN
        .trim：自动去掉用户输入内容两端的空格
    -->
    <div id="myApp">
        <h1>用户注册</h1>

        <div>
            <label for="username">用户:</label>
            <input type="text" id="username" v-model.lazy="username" @change="checkUserName">
            <span v-if="checkUserNameOK">可注册</span>
        </div>
        <div>
            <label for="age">年龄:</label>
            <input type="number" id="age" v-model.number="age">
        </div>
        <div>
            <label for="content">意见:</label><br>
            <textarea id="content" v-model.trim="content" cols="50" rows="10"></textarea>
        </div>

        <h4>信息区</h4>
        <p>{{username}}</p>
        <p>{{age}}</p>
        <p><pre>{{content}}</pre></p>
    </div>
    <script>
        var myApp = new Vue({
            el: '#myApp',
            data: {
                username: "",
                checkUserNameOK: false,
                age: "",
                content: ""
            },
            methods: {
                checkUserName: function () {
                    if(this.username.length > 0)
                        this.checkUserNameOK = true;
                    else
                        this.checkUserNameOK = false;
                }
            }
        });
    </script>
</body>
</html>