VUE前端应用开发课程实验---------实验四

最新推荐文章于 2024-05-06 13:38:38 发布

又菜有爱写

最新推荐文章于 2024-05-06 13:38:38 发布

阅读量362

点赞数 2

分类专栏： vue实验文章标签：前端 vue.js javascript html

本文链接：https://blog.csdn.net/m0_54430913/article/details/131242895

版权

vue实验专栏收录该内容

7 篇文章 4 订阅

订阅专栏

一.实验名称：

表单控件绑定

二.实验目的：

( 1)熟练掌握应用v-mode1指令实现双向数据绑定的方法，学会使用v-mode1指令绑定文本框、复选框、单选按钮、下拉菜单;

( 2)学会值绑定（将表单控件的值绑定到动态属性）和v-mode1 的修饰符。

三.实验内容

使用v-mode1指今实现表单控件的数据绑定，完成用户注册信息的填写和显示功能。要求︰设计如图1所示的用户注册表单，使用v-mode1指合实现表单控件与Vue实例的相应属性的双向数据绑定，当用户填写信息（或选择）完毕并点击提交按钮，程序将用户填写的信息或选择的结果输出至控制台，或弹窗显示。

四：实验源码：

<!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.js"></script>
</head>
<body>
    <h3>用户注册</h3>
    <div id="box">
        <table border="1" style="text-align: center;">
            <tr>
                <td>用户名：</td>
                <td><input type="text" v-model="message"></td>
                <td>{{message}}</td>
            </tr>
           
            <tr>
                <td>个人简介：</td>
                <td><textarea v-model="info"></textarea></td>
                <td>{{info}}</td>
            </tr>
           
            <tr>
                <td>性别：</td>
                <td><input type="radio" value="男" name="sex" v-model="sex">男
                <input type="radio" value="女" name="sex" v-model="sex">女</td>
                <td>{{sex}}</td>
            </tr>
           
            <tr>
                <td>爱好：</td>
                <td>
                <input type="checkbox" name="hobby" v-model="checkHobby" :value="hobby[0]">HTML
                <input type="checkbox" name="hobby" v-model="checkHobby" :value="hobby[1]">CSS
                <input type="checkbox" name="hobby" v-model="checkHobby" :value="hobby[2]">VUE
                </td>
                <td>{{ checkHobby   }}</td>
            </tr>
           
            <tr>
                <td><span style="size:1px;color:blue;">对爱好进行快捷操作</span></td>
                <td>
                    <input type="button" value="全选" @click="selectAll">
                    <input type="button" value="全不选" @click="noselectAll">
                    <input type="button" value="反选" @click="reverseSelect">
                </td>
            </tr>
           
            <tr>
                <td>所在地：</td>
                <td>
                    <select name="loc" id="" v-model="loc">
                        <option value="尖草坪">尖草坪</option>
                        <option value="小店区">小店区</option>
                        <option value="迎泽区">迎泽区</option>
                    </select>
                </td>
                <td>{{loc}}</td>
            </tr>
           
            <tr>
                <td>选择你擅长的技术：</td>
                <td>
                    <select name="movie" id="" v-model="movie" multiple="multiple">
                        <option value="JAVA">JAVA</option>
                        <option value="前端VUE">前端VUE</option>
                        <option value="PHP">PHP</option>
                    </select>
                </td>
                <td>{{movie}}</td>
            </tr>
           
            <tr>
                <td>可选职位：</td>
                <td colspan="2">
                    <select name="job" id="" multiple="multiple" >
                        <option v-for="jobvalue in joblist" :value="jobvalue">{{jobvalue}}</option>
                    </select>
                    <button @click="right">>>></button>

                    <button @click="left"><<<</button>
                    <select v-model="selectjob" multiple="multiple">
                        <option v-for="lista in myjob" :value="lista">{{lista}}</option>
                    </select>
                </td>
                
            </tr>
           
            <tr>
                <td colspan="3">
                    <input type="submit" value="提交" @click="present">
                    <input type="reset" value="取消" @click="empty">
                </td>
                
            </tr>
           
        </table>
    </div>

    <script type="text/javascript">
        var test = new Vue({
            el:'#box',
            data:{
                message:"",
                info:"",
                sex:"",
                checked:false,
                temHobby:[],
                checkHobby:[],
                hobby:["HTML","CSS","VUE"],
                loc:"",
                movie:[],
                joblist:['前端工程师','Java工程师','软件测试'],
                job:[],
                myjob:[],
                selectjob:[]
            },
            methods: {
                selectAll:function(){
                    this.checkHobby=this.hobby;
                },
                noselectAll:function(){
                    this.checkHobby = [];
                },
                reverseSelect:function(){
                    this.tempHobby=[];
                    for (var i = 0; i < this.hobby.length; i++) {
                       if(!this.checkHobby.includes(this.hobby[i])){
                        this.checked = true;
                        this.temHobby.push(this.hobby[i]);
                       }else{
                        this.checked = false;
                       }
                        
                    }
                    this.checkHobby = this.tempHobby;
                },
                 right:function(){
                    for(var i = 0; i<this.joblist.length;i++){
                        this.job.push(this.joblist[i]);
                        this.myjob.push(this.joblist[i])
                      var index = this.joblist.indexOf(this.job[i]);
                        this.joblist.splice(index,1);
                    }
                    this.job=[];
                },
                left:function(){
                    for(var i = 0; i<this.selectjob.length;i++){
                        this.joblist.push(this.selectjob[i]);
                        var index = this.myjob.indexOf(this.selectjob[i]);
                        this.myjob.splice(index,1);
                    }
                    this.selectjob=[];
                },
                present(){
                    alert("姓名:"+this.message +
                           "\n个人简介:"+this.info+
                           "\n性别:"+this.sex+
                           "\n爱好:"+this.checkHobby+
                          "\n所在地:"+this.loc+
                          "\n擅长的技术:"+this.movie+
                          "\n选择职位:"+this.joblist
                    )
                },
                empty(){},
            },
            watch:{
                "checkHobby":function(){
                    if(this.checkHobby.length>0){
                        this.checked = true;
                    }else{
                        this.checked = false;
                    }
                },
               
            },
        })
    </script>
</body>
</html>