Vue学习笔记1(动态新增行)

<template>
    <div class="home">
        <h1>{{ msg }}</h1>
        <p>Welcome to your new single-page application, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p>
        <div>
            {{20>10?aaa:bbb}}
        </div>
        <ul>
            <li v-for='item in itemList' :key="item.id">
                {{item.name}}--{{item.sex=='0'?'男':'女'}}
            </li>
        </ul>
        <input type="button" value="添加数据行" @click="AddRow()">
        <div v-for='(it,index) in inputList' :key="it.id">
            <input v-model=it.text >
            <input type="button" value="删除" @click="delRow(it,index)">
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        props: {
            msg: String,            
        },
        data() {
            return {
                aaa: 'aaab',
                bbb: 'bbba',
                itemList: [
                    { name: '张三', sex: '0', age: '15',id:'1' },
                    { name: '李四', sex: '0', age: '22',id:'2' },
                    { name: '王丽', sex: '1', age: '14',id:'3' },
                ],
                inputList:[
                    {id:'input1',text:'111111'},                    
                ]
            }
        },
        methods:{
            delRow(it,index){
                this.inputList.splice(index,1);//删除数组
            },
            AddRow(){
                //添加数组，自动增加id和数字
                var ids=[];
                //判断数组是否有值，有的话就取出id中的数字
                for (let index = 0; index < this.inputList.length; index++) {
                    const element = this.inputList[index];
                    ids.push(parseInt(element.id.replace('input','')))
                }
                var maxid=0;
                //对数组中id数字进行倒叙排序，取出最大的数字
                if (ids.length>0) {
                    maxid=ids.sort((a,b)=>b-a)[0];
                }
                maxid+=1;//最大的数组+1
                //往数组中添加对象
                this.inputList.push({id:'input'+maxid.toString(),text:maxid.toString()});
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>