vue实现王者列表

最新推荐文章于 2024-07-05 14:51:32 发布

MIC的小橘子

最新推荐文章于 2024-07-05 14:51:32 发布

阅读量190

点赞数 2

分类专栏： vue的介绍使用文章标签： css css3 javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_54567665/article/details/139130934

版权

vue的介绍使用专栏收录该内容

10 篇文章 0 订阅

订阅专栏

展示王者荣耀中的人物能力信息列表数据

1.页面展示：

2.功能说明

1）展示出所有的王者的基本信息（表格）

2）点击“添加英雄”按钮打开添加页面

3）在添加页面点击“提交”按钮将添加的数据显示到页面表格中

4）点击“删除英雄”按钮按照倒序的方式进行删除

3.开发步骤

a）创建html页面

b）页面元素布局

c）样式美化处理

d）页面数据展示及效果处理

e）事件实现功能

4.代码

css样式：

<style type="text/css">
/* 表格容器样式 */
.tableContain{
width: 70%;
margin: 50px auto;
}
/* 表格按钮容器样式 */
.btnCon{
width: 210px;
margin: 30px auto;
}
/* 表格按钮样式 */
.btnCon button{
width: 90px;
outline: none;
background-color: green;
border: 0px;
color: white;
height: 30px;
border-radius: 3px;
letter-spacing: 1px;
}
/* 遮罩层样式 */
.bj{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.4;
}
/* 添加英雄的样式 */
.addList{
position: absolute;
width: 500px;
height: 300px;
top: 50px;
left: 35%;
z-index: 100;
background-color: #f1f1f1;
text-align: center;
border-radius: 3px;
}
/* 提交按钮样式 */
.addList button{
width: 190px;
background-color: yellowgreen;
border: 0px;
height: 30px;
border-radius: 3px;
letter-spacing: 1px;
}
ul{
margin: 5px auto 30px;
width: 85%;
border-top: 1px solid hsl(147, 99%, 52%);
}
li{
height: 30px;
line-height: 30px;
margin-top:8px;
list-style: none;
}
</style>

html文件：

<!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>
    <!-- 引入js文件 -->
    <script src="js/vue2.js"></script>
</head>
<body>
    <!-- 管理区域 -->
    <div id="box">
         <!-- 管理表格的div -->
        <div class="tableContain">
            <!-- 管理按钮的div -->
            <div class="btnCon">
                <button @click="addHreo()">添加英雄</button>
                <button @click="delHreo()">删除英雄</button>
            </div>
            <!-- 创建表格 -->
            <table border="1" style="border-collapse: collapse;" width="80%">
                <tr>
                <th>序号</th>
                <th>英雄名称</th>
                <th>熟练度</th>
                <th>评分</th>
                <th>位置</th>
                </tr>
                <!-- 绑定数据 -->
                <tr v-for="(hreo, index) in hreos" align="center">
                    <td>{{index}}</td>
                    <td>{{hreo.HeroName}}</td>
                    <td>{{hreo.slDo}}</td>
                    <td>{{hreo.pingF}}</td>
                    <td>{{hreo.local}}</td>
                </tr>
            </table>
        </div>
        <!-- 添加英雄的div -->
        <div>
            <!-- 遮罩层div -->
            <div class="bj" v-show="isShow"></div>
            <!-- 添加列表的div -->
            <div class="addList" v-show="isShow">
                <h3>添加英雄</h3>
                <!-- 无序列表（添加数据） -->
                <ul>
                    <li>英雄名称：<input type="text" v-model="item.HeroName" /></li>
                    <li>熟练度：<input type="text" v-model="item.slDo"/></li>
                    <li>评分：<input type="text" v-model="item.pingF"/></li>
                    <li>位置：<input type="text" v-model="item.local"/></li>
                </ul>
                <button @click="submit()">提交</button>
            </div>
        </div>
    </div>
    <!-- 自定义脚本 -->
    <script>
        // 创建对象
        var vm = new Vue({
            el: '#box',
            data: {
                isShow: false,
                item:{ // 对象属性
                HeroName:'',
                slDo:'',
                pingF:'',
                local:''
            },
            hreos: [ // 数组中是一个一个的独立对象
                {
                    HeroName:'吕布',
                    slDo:'******',
                    pingF:'89',
                    local:'对抗路'
                },
                {
                    HeroName:'老夫子',
                    slDo:'****',
                    pingF:'80',
                    local:'对抗路'
                },
                {
                    HeroName:'瑶妹',
                    slDo:'**',
                    pingF:'100',
                    local:'发育路'
                },
                {
                    HeroName:'大乔',
                    slDo:'*****',
                    pingF:'60',
                    local:'中路'
                 }
              ]
            },
            methods: {
                addHreo(){
                    this.isShow = true
                },
                submit(){
                    // 将页面中输入的对象内容添加到数组中
                    this.hreos.push(this.item)
                    // 清除对象中的数据
                    this.item={ // 对象属性
                        HeroName:'',
                        slDo:'',
                        pingF:'',
                        local:''
                    }
                    // 隐藏添加信息
                    this.isShow = false
                },
                delHreo(){
                    // 将数组中的最后一个元素删除掉
                    this.hreos.pop()
                }
            },
        })
    </script>
</body>
</html>