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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/vue.js"></script><style typ...

海涛高软

3419人浏览 · 2019-09-02 20:46:10

海涛高软 · 2019-09-02 20:46:10 发布

<!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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^