银行网站开发,武邑网站建设公司,网页设计实训3000字,中国建设网站官方网站目录
一、案例实现页面
二、案例实现效果
1. 查询效果
2. 年龄升序
3. 年龄降序
4. 原顺序
三、案例实现思路
四、完整代码 一、案例实现页面
实现用户对年龄的升降的排序、根据名字搜索用户信息以及重新返回原序列 二、案例实现效果
1. 查询效果 2. 年龄升序 3. 年龄…目录
一、案例实现页面
二、案例实现效果
1. 查询效果
2. 年龄升序
3. 年龄降序
4. 原顺序
三、案例实现思路
四、完整代码 一、案例实现页面
实现用户对年龄的升降的排序、根据名字搜索用户信息以及重新返回原序列 二、案例实现效果
1. 查询效果 2. 年龄升序 3. 年龄降序 4. 原顺序 三、案例实现思路
1. 定义界面所需标签样式 div idapph2查询用户:/h2input typetext placeholder请输入名字/button年龄升序/buttonbutton年龄降序/buttonbutton原顺序/buttontable border1pxtrth编号/thth姓名/thth性别/thth年龄/th/tr/table/div
2. 定义界面所需数据 data: function () {return {datas: [{ id: 1, name: 李思思, sex: 女, age: 20 },{ id: 2, name: 王五, sex: 男, age: 24 },{ id: 3, name: 张三, sex: 男, age: 22 },{ id: 4, name: 李四, sex: 男, age: 21 },],inputname: ,sortType: 0, //0表示原顺序,1表示升序,2表示降序};}
3. 将数据循环放置在标签中 tr v-for(data,index) in fillDatas :keydata.idtd{{data.id}}/tdtd{{data.name}}/tdtd{{data.sex}}/tdtd{{data.age}}/td/tr
4. 分别给每个按钮绑定相应的事件
0表示原顺序,1表示升序,2表示降序 button clicksortType1年龄升序/buttonbutton clicksortType2年龄降序/buttonbutton clicksortType0原顺序/button
5. 将事件全部定义在计算属性中 filter ()方法创建给定数组的一部分的浅副本过滤掉给定数组中通过所提供函数实现的测试的元素 过滤数据获取数组对象 sort() 方法对原列表进行排序如果指定参数则使用比较函数指定的比较函数。 indexOf ()方法返回给定元素在数组中的第一个索引如果不存在则返回-1。 computed: {//data中数据有变化,计算属性就在监听fillDatas() {//filter ()方法创建给定数组的一部分的浅副本过滤掉给定数组中通过所提供函数实现的测 试的元素//过滤数据获取数组对象let arr this.datas.filter((data) {return data.name.indexOf(this.inputname) -1;});if (this.sortType 1) {//升序arr.sort(function (d1, d2) {return d1.age - d2.age;});}if (this.sortType 2) {//降序arr.sort(function (d1, d2) {return d2.age - d1.age;});}return arr;},}
四、完整代码
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title查询用户/title/headbodydiv idapph2查询用户:/h2input typetext placeholder请输入名字 v-modelinputname /button clicksortType1年龄升序/buttonbutton clicksortType2年龄降序/buttonbutton clicksortType0原顺序/buttontable border1pxtrth编号/thth姓名/thth性别/thth年龄/th/trtr v-for(data,index) in fillDatas :keydata.idtd{{data.id}}/tdtd{{data.name}}/tdtd{{data.sex}}/tdtd{{data.age}}/td/tr/table/divscript typetext/javascript src../js/vue.global.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata: function () {return {message: Hello Vue,datas: [{ id: 1, name: 李思思, sex: 女, age: 20 },{ id: 2, name: 王五, sex: 男, age: 24 },{ id: 3, name: 张三, sex: 男, age: 22 },{ id: 4, name: 李四, sex: 男, age: 21 },],inputname: ,sortType: 0, //0表示原顺序,1表示升序,2表示降序};},//计算属性computed: {//data中数据有变化,计算属性就在监听fillDatas() {//filter ()方法创建给定数组的一部分的浅副本过滤掉给定数组中通过所提供函数实现的测试的元素//过滤数据获取数组对象let arr this.datas.filter((data) {return data.name.indexOf(this.inputname) -1;});if (this.sortType 1) {//升序arr.sort(function (d1, d2) {return d1.age - d2.age;});}if (this.sortType 2) {//降序arr.sort(function (d1, d2) {return d2.age - d1.age;});}return arr;},},});// 2.挂载appapp.mount(#app);/scriptstyle/style/body
/html
