vue-webpack-bootstrap信息管理系统
效果图：
功能：
拆分为两个子组件，子组件向父组件传值以及方法，增，删，改，查四个功能都有，由于子组件与父组件不能双向绑定，所以用到了watch监控数据变化
代码：
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/animate.css"> <style> * { margin: 0; padding: 0; list-style: none; }
body { width: 100%; height: 1500px; overflow: scroll;
}
.one { width: 1100px; height: 400px; margin: 20px auto; font-size: 20px; }
.one input { width: 1000px; height: 50px; margin-top: 10px; }
.one div { width: 100px; height: 50px; border-radius: 20px; margin: 20px 480px; font-size: 30px; color: #fff; text-align: center; line-height: 50px; background-color: #ff6767; cursor: pointer; }
.two { width: 1100px; height: 100px; margin: 0 auto; }
.two input { width: 1000px; height: 50px; }
ul { width: 1100px; height: 50px; text-align: center; line-height: 50px; margin: 0 auto; border: 1px solid gray; }
li { width: 150px; height: 48px; float: left; margin-top: 2px; border-bottom: 1px solid gray; }
span { cursor: pointer; display: block; width: 73px; height: 40px; text-align: center; line-height: 40px; float: left; background: #ff6767; border-radius: 20px; color: #fff; margin-top: 5px; }
span:nth-child(2) { background-color: lightgreen; } </style></head>
<body> <div id="app"> <one @xinxi="show" :bool1="bool" :num="num" :gaiobj="gaiobj" @xiugai="gaijiao"></one> <two :arr1="arr" @shu="gai" @del="del"></two> </div> <template id="top"> <div> <div class="one"> 姓名: <input type="text" v-model="name"><br> 年龄: <input type="text" v-model="age"><br> 学校: <input type="text" v-model="school"><br> 专业: <input type="text" v-model="major"><br> <div @click="btn" v-if="bool1==true">提交</div> <div @click="btn1" v-if="bool1!=true">修改</div> </div>
</div> </template> <template id="bot"> <div> <div class="two"> 搜索: <input type="text" v-model="words"> </div> <div> <ul> <h1>学生信息管理</h1> </ul> <ul class="title"> <li>id</li> <li>姓名</li> <li>年龄</li> <li>学校</li> <li>专业</li> <li>时间</li> <li>操作</li> </ul> <ul v-for="(item,index) in search(words)" :key="index"> <li>{{index}}</li> <li>{{item.name}}</li> <li>{{item.age}}</li> <li>{{item.school}}</li> <li>{{item.major}}</li> <li>{{item.time | dateformat}}</li> <li> <span @click="del(index)">删除</span> <span @click="edit(index)">修改</span> </li> </ul> </div> </div> </template>
<script src="./js/vue.js"></script>
<script> Vue.filter("dateformat", function (dataString) { var dd = new Date(dataString); var dd = new Date(dataString);
var y = dd.getFullYear(); var m = dd.getMonth() + 1; var d = dd.getDate();
var hh = dd.getHours(); var mm = dd.getMinutes(); var ss = dd.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}` }) var vm = new Vue({ el: "#app", data: { name: "", age: "", school: "", major: "", num: "", arr: [], arr2: [], bool: true, gaiobj: {}, }, methods: { del(data) { console.log(data); this.arr.splice(data,1); }, show(data) { this.arr = data; }, gai(data) { this.bool = data.bool; this.num = data.num; this.gaiobj = this.arr[data.num]; }, gaijiao(obj) { console.log(obj); Object.assign(this.arr[this.num], obj); } }, components: { one: { template: "#top", data: function () { return { name: "", age: "", school: "", major: "", arr: [], } }, methods: { btn() { this.arr.push({ "name": this.name, "age": this.age, "school": this.school, "major": this.major, "time": new Date(), }) this.$emit("xinxi", this.arr) }, btn1() { this.$emit("xiugai",{ name:this.name, age:this.age, school:this.school, major:this.major }) }, }, props: ["bool1", "num","gaiobj"], watch: { gaiobj(newvalue,oldvalue){ this.name = newvalue.name; this.age = newvalue.age; this.school = newvalue.school; this.major = newvalue.major; this.bool = true; } } }, two: { template: "#bot", data: function () { return { name: "", age: "", school: "", major: "", bool: true, num: "", arr2:[], words:"", } }, methods: { del(index) { this.$emit("del",index); }, edit(index) { this.bool = false; this.num = index; this.$emit("shu",{ "bool":this.bool, "num":this.num, }) }, search(words) { return this.arr1.filter(function (item) { if (item.name.indexOf(words) != -1) { return item; } }) } }, props: ["arr1"] } }, }) </script></body>
</html>
扫一扫
1456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
