（10）表单操作

最新推荐文章于 2024-11-01 14:22:21 发布

liuyang___

最新推荐文章于 2024-11-01 14:22:21 发布

阅读量83

点赞数

分类专栏： vue学习笔记文章标签： vue.js webview elementui

本文链接：https://blog.csdn.net/liuyang___/article/details/125216019

版权

vue学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <form action="http://itcast.cn">
            <div>
                <span>姓名：</span>
                <span><input type="text" v-model="uname"></span>
            </div>
            <div>
                <span>性别：</span>
                <span>
                    <input type="radio" id="male" value="1" v-model="gender">
                    <label for="male">男</label>
                    <input type="radio" id="female" value="2" v-model="gender">
                    <label for="female">女</label>
                </span>
            </div>
            <div><span>爱好：</span>
                <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>
            <div>
                <span>职业：</span>
                <select v-model="occupation" multiple="true">
                    <option value="0">请选择职业...</option>
                    <option value="1">教师</option>
                    <option value="2">软件工程师</option>
                    <option value="3">律师</option>
                </select>
            </div>
            <div><span>个人简介：</span> <textarea v-model="desc"></textarea></div>
            <div><input type="submit" value="提交" @click.prevent="handle"></div>
        </form>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                uname:'李四',
                gender:1,
                hobby:['2','3'],
                occupation:['2','3'],
                desc:'您好'
            },
            methods:{
                handle:function(){
                    // console.log(this.uname);
                    // console.log(this.gender);
                    // console.log(this.hobby.toString());
                    // // console.log(this.occupation);
                    console.log(this.desc);
                },
            }
        })
    </script>
</body>

</html>

一共介绍了5中表单属性

1.在input中，双向数据绑定v-model，这个之前写过，就不过多介绍了

2.在radio中，用v-model进行绑定，在每个radio中设置value，在data中声明一个变量去传数据，比如我们这里，给的是1，那么他就会默认选择第一个。

3.在checkbox中，用v-model绑定，先设置vaule值，在data中声明一个数组，注意是数组，因为不是单选，所以必须设置数组，我们这里默认让其选择2和3。

4.在select中，下面会有很多的option，我们也先给value，然后通过value去控制选择，注意，这里可以是数组（设置数组时，要注意，要给multiple属性），也可以是单个的数字。若是数字，那么他会显示一个选择，若是数组，那么他会选择你写的数组。

5.在textarea中，其实和input中一样，不做过多解释了。