HTML和Vue的相关练习

最新推荐文章于 2025-10-23 13:24:30 发布

原创最新推荐文章于 2025-10-23 13:24:30 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

该文描述了使用JavaScript实现登录页面，通过用户名和密码的输入及验证实现登录功能。同时，利用Vue技术构建了一个表格展示用户数据，包含增删查选的交互功能，如新增、修改和删除用户信息。

实现两个页面

页面一:登录(用户名,密码的输入，对于密码和用户名的判断，登录方式的切换)。判断之后不能登录,

返回当前页面,能够登录,跳转页面, ()window.)

页面2:用户列表界面，(表格(有数据)，(增删查选做按钮，)

任务1：思路：这里的页面跳转我直接使用弹窗来处理（也达到练习目的，这里跳转的话可以考虑src或则url），使用button按钮设置一个监听事件，当发生点击时，说明：确认然后函数被调用，如果相同则弹窗弹出“登录成功”，否则登录失败

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" id="account">请输入账号:
        <input type="password" id="password">请输入密码<br>
    <button id="but" style="align-self: center;">登录</button>
    </body>
</html>
<script>
    var account1="123"
    var password1="123"
    const but=document.querySelector('button')
    but.addEventListener('click',function(){
        if(account.value==account1&&password.value==password1){
            alert("登录成功")
        }else alert("信息错误，请重新输入")
    })
    
    
</script>

运行效果：

任务二：思路：这里我们考虑应为表格形式，所以采用Vue技术。把html页面也好后，部分标签选择器进行渲染。在html里面填写函数头，然后在script标签里面用Vue技术撰写点击函数等函数，分别包括了新增函数，修改函数update，删除函数delete和其他判断状态的函数如isactive等，用来判断新加页面的出现与否。

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

<head>
    <meta charset="UTF-8">
    <meta name="" content="width=device-width">
    <script src="../Vue/vue.min.js"></script>
    <title>表格实现增删改查</title>
    <style>
        /* 这里是背景  表格和字体的设置，采用的标签选择器 */
        html {
            background:transparent url(9.jpg)
            }
        
        
        table td,
        table th {
            height: 50px;
            width: 150px;
            border: 2px #adc;
            background: grey; 
            
            padding: 10px 10px 10px 20px;
            opacity: 0.4;
        }
    
        #ss{
            text-align: center;
            font-size: 20px;
        }
        /*字体设置*/
        
        .container,
        .st {
            width: 1000px;
            margin: 10px auto 0;
            font-size: 13px;
            font-weight: bolder;
            color: black;
        }

        
    </style>
</head>



<body>
    <div class="st">
        <caption style="align-self: center;">Vue实现对数据的增删改查</caption>
    </div>
    <div class="st" id="app">
        <div>
            <input type="text" placeholder="查询" @input="search" list="cars" class="search">
            <datalist id="cars">  //数据集在searchlist里面，这里是一个for循环
                <option :value="item" v-for="item in searchlist"></option>
            </datalist>
             <button class="add" @click="add">增加</button>
        </div>
        <div>
            <table cellspacing="0px">
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
                <tr id="ss" v-for="(item ,index) of slist">
                    <td>{{index+1}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.hobby.join('|')}}</td>
                    <td>
                        <a  @click="update(index)">修改</a>
                        <a  @click="del(index)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
        <model :list="selectedlist" :isactive="isActive"  @change="changeOverlay" @modify="modify"></model>
    </div>
</body>

</html>
 <script>
    Vue.component('model', {
        props: ['list', 'isactive'],
        template: `<div class="overlay" v-show="isactive">
                        <div class="con">
                        <h2 class="title">新增 | 修改</h2>
                        <div class="content">
                        <table>
                            <tr>
                                <td>用户名</td>
                                <td><input type="text" v-model="modifylist.username"></td>
                            </tr>
                            <tr>
                                <td>爱好</td>
                                <td>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="篮球">篮球</label>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="读书">读书</label>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="插画">插画</label>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="编程">编程</label>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="弹琴">弹琴</label>
                                </td>
                            </tr>
                        </table>
                        <p>
                        <input type="button" @click="changeActive" value="取消">
                        <input type="button" @click="modify" value="保存">
                        </p>
                        </div>
                        </div>
                    </div>`,
        computed: {
            modifylist() {
                return this.list;
            }
        },
        methods: {
            changeActive() {
                this.$emit('change');
            },
            modify() {
                this.$emit('modify', this.modifylist);
            }
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            isActive: false,
            selected: -1,
            selectedlist: {},
            slist: [],
            searchlist: [],
            list: [{
                    username: 'alice',
                    hobby: [ '读书', '编程']
                },
                
                {
                    username: 'jack',
                    hobby: ['篮球']
                },
                {
                    username: 'mike',
                    hobby: ['篮球', '读书', '编程']
                },
                {
                    username: 'hi',
                    hobby: ['弹琴', '读书', '插画']
                },
                {
                    username: '娥娥',
                    hobby: ['篮球']
                }
            ]
        },
        created() {
            this.setSlist(this.list);
        },
        methods: {
            // 修改数据
            update(index) {
                this.selected = index;
                this.selectedlist = this.list[index];
                this.changeOverlay();
            },
            // 点击保存按钮
            modify(arr) {
                if (this.selected > -1) {
                    Vue.set(this.list, this.selected, arr);
                    this.selected = -1;
                } else {
                    this.list.push(arr);
                }
                this.setSlist(this.list);
                this.changeOverlay();
            },
            add: function() {
                this.selectedlist = {
                    username: '',
                    hobby: []
                };
                this.isActive = true;
            },
            // delete list in index location
            del(index) {
                this.list.splice(index, 1);
                this.setSlist(this.list);
            },
            // 这里是未点击状态则是隐藏 isactive=false
            changeOverlay() {
                this.selected = -1;
                this.isActive = !this.isActive;
            },
            // 获取需要渲染到页面中的数据
            setSlist(arr) {
                this.slist = JSON.parse(JSON.stringify(arr));
            },
            // 搜索
            search(e) {
                var v = e.target.value,
                self=this;
                   self.searchlist = [];
                if (v) {
                    var ss = [];
                    // 过滤需要的数据
                    this.list.forEach(function(item) {
                        if (item.username.indexOf(v) > -1) {
                            if (self.searchlist.indexOf(item.username) == -1) {
                                self.searchlist.push(item.username);
                            }
                            ss.push(item);
                        }
                    });
                    this.setSlist(ss); // 将过滤后的数据给了slist
                } else {
                    // 没有搜索内容，则展示全部数据
                    this.setSlist(this.list);
                }
            }
        },
    }) 
 </script>