Vue添加一条个人信息并将所有个人信息列表展示出来

最新推荐文章于 2024-07-30 11:41:48 发布

海涛高软

最新推荐文章于 2024-07-30 11:41:48 发布

阅读量3.3k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_15267341/article/details/100380205

版权

VUE 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style type="text/css">
        .left {
            float: left;
            width: 20%;
            margin-left: 10%;
        }

        .right {
            float: left;
            width: 40%;
        }

        ul li {
            list-style: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="left">
        <form action="" method="post" @submit.prevent="haihai">
            <h3>个人信息录入</h3>
            我的名字叫什么？<br/>
            <input type="text" v-model="namee"/> <br/>
            更喜欢哪门语言？
            <select v-model="like">
                <option value="英语">英语</option>
                <option value="汉语">汉语</option>
            </select>
            <br/>
            <input type="submit" value="添加"/>
        </form>
    </div>
    <div class="right">
        <h3>所有成员信息</h3>
        <p v-show="allInfo.length==0">温馨提示：目前没有成员信息，请添加</p>
        <ul>
            <li v-for="(item,index) in allInfo" :key="index">
              {{index+1}} 、  {{item.namee}}-----{{item.like}} <button @click="del(index)">删除</button>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            namee: "",
            like: "英语",
            allInfo: []
        },
        methods: {
            haihai() {
                //表单自动收集，以及添加功能
                const info = {"namee": this.namee, "like": this.like}  //自动收集表单对象
                this.allInfo.unshift(info);
            },
            del(zhi){
                this.allInfo.length
                //删除一个个人信息
                this.allInfo.splice(zhi,1);
            }
        }
    });
</script>
</html>

FR:徐海涛（hunkXu)
QQ技术交流群：386476712