vue之表单的相关操作

最新推荐文章于 2023-06-10 23:43:15 发布

hi__web

最新推荐文章于 2023-06-10 23:43:15 发布

阅读量102

点赞数

分类专栏： web之Vue 文章标签： vue 前端经验分享

本文链接：https://blog.csdn.net/hi__web/article/details/107129626

版权

web之Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以下内容可自行c,v到编辑器打开(vue文件请在官网下载)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 注:表单只能用v-model -->
    <div id="app">
        <div v-text="a"></div>
        <hr>
        <!-- 普通输入框 -->
        <div>
            <input type="text" v-model="a">
        </div>
        <hr>
        <!-- 单选按钮两个的v-model绑定值要相同,当其绑定的值和其中一个的value相同时,默认选中这一项 -->
        <div>
            <input type="radio" id="male" value="1" v-model="dender">
            <label for="male">男</label>
            <input type="radio" id="female" value="2" v-model="dender">
            <label for="female">女</label>
        </div>
        <hr>
        <!-- 复选框v-model绑定值要相同,当其绑定的值和其中一个的value相同时,默认选中这一项  -->
        <div>
            <input type="checkbox" id="ball" value="1" v-model="hobby">
            <label for="ball">篮球</label>
            <input type="checkbox" id="sing" value="2" v-model="hobby">
            <label for="sing">唱歌</label>
            <input type="checkbox" id="code" value="3" v-model="hobby">
            <label for="code">代码</label>
        </div>
        <hr>
        <!-- 下拉框v-model绑定给父级元素,当其绑定的值和其中一个的value相同时,默认选中这一项 -->
        <div>
            <select v-model="zhiye">
               <option value="0">请选择职业</option>
               <option value="1">老师</option>
               <option value="2">公务员</option>
               <option value="3">码农</option>
           </select>
        </div>
        <hr>
        <!-- 文本域 -->
        <div>
            <textarea v-model="a"></textarea>
        </div>
        <!-- 表单修饰符 number转数字,trim去除两头的空格,lazy.将input事件转为change事件-->
        <input type="text" v-model.trim="age">
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                a: 123,
                // 单选按钮
                dender: 2,
                // 复选框为数组形式
                hobby: ['2', '3'],
                // 下拉框
                zhiye: 2,
                // 文本域
                a: 12255,
                // 表单的修饰符
                age: 122
            },
            methods: {

            }
        })
    </script>
</body>

</html>