Vue.js与Bootstrap实践-优快云博客

本文链接：https://blog.youkuaiyun.com/wdnmd____c/article/details/102979472

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--bootstrap.css文件中写了很多样式类，我们使用其样式类就可以获得相应样式。-->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div id="app">
        <div>
            id：<input type="text" v-model="id">
            name：<input type="text" v-model="name">
            <input class="btn btn-primary" type="button" value="添加" @click="add">
        </div>
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <!--td是tbody的列-->
                <!--th是thead下的列-->
                <th>Id</th>
                <th>名字</th>
                <th>创建日期</th>
				<th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="person in people">
                <td>{{person.id}}</td>
                <td>{{person.name}}</td>
                <td>{{person.date}}</td>
				<td><button  type="button" class="btn btn-danger" @click="del(person.id)">删除</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: null,
            name: null,
            people: [
                {id: 1, name: '张三', date: new Date()},
                {id: 2, name: '赵四', date: new Date()},
                {id: 3, name: '刘能', date: new Date()},
            ]
        },
        methods: {
			del(id){
				// 1.迭代products
				// 2.找到下标
				// 3.删除下标对应的元素
				// 4.结束迭代
				this.people.some((data,index)=>{
					if(id == data.id){
						this.people.splice(index,1);
						return true;
					}
				});
			},
            add() {
                // alert(this.id + '----' + this.name);
                /*1、构造一个product对象*/
                var person = {
                    id: this.id,
                    name: this.name,
                    date: new Date()
                };
                /*2、将构造好的对象插入到products的最后一位。*/
                // array.push(data);会将data插入array数组的末位。与其对应的api是array.unshift(data)，表示将data插入首位
                this.people.push(person);
            }
        }
    });
</script>
</body>
</html>

默写02