听说大牛都从博客开始的。。。
人狠话不多，翠花上酸菜代码：
有注解基本上都看的懂！但是自己还是要注意以下几点，免得以后再浪费时间。
#.vue 中监听事件 v-on:change=“vuechange($event.target.value)”(或@),注意 纯 js中监听事件 onchange="jschange（ this.options[this.options.selectedindex].value )"来获得 value;也可以在函数中拿到标签 dom 用 addvaddeventlistener ('change', function(){ jschange（this.options[this.options.selectedindex].value ） },false).然后在 jschange（）方法中接收 value 处理数据。分页代码都差不多。
#.通过name属性获取标签 dom: document.getelementsbytagname('select')[name="test"].
#.类型为 number 的 input 框意外的输入字母 e （自然常数，为数学中一个常数，是一个无限不循环小数，且为超越数，其值约为2.71828）处理：onkeypress="return( /[\d]/.test(string.fromcharcode(event.keycode) ) )"。
#.分页功能主要在 winnergroup() 方法，双层循环没啥说的要做保险。
#.css 中 select 和 input 设置了同样的宽高 但 select content 总是少 2px
select:
input:
box-sizing: border-box;/* 元素的任何内边距和边框都将包括在已设定的宽度和高度内 */
也就是把内边距和边框都包含在你设置的 height 和 width 里了(应该可以理解包含在 content)这样就解决了不一致的状况。
#. v-model 双向数据绑定，监听 pagenumber 变化随之变化。
我要评论 1 <!-- 中奖查询及查询条件 -->
2 <template>
3 <div id="paging">
4 <div class="winners">
5 <ul>
6 <li v-for="winner in winners" :key="winner.id">{{winner.name}}</li>
7 </ul>
8 </div>
9 <div class="condition">每页显示
10 <!-- 1.获取事件对象 ， 方法参数传递 $event -->
11 <!-- 2.在标签上添加 ref = “name” ，表示获取当前元素节点(this.$refs.info.value) -->
12 <select name="changeitems" @change="changeitems($event.target.value)">
13 <option :value="3">3</option>
14 <option :value="6">6</option>
15 <option :value="9">9</option>
16 </select>条
17 <button v-on:click= "changepage(pagenumber -= 1)">上一页</button>第
18 <button disabled="disabled">{{pagenumber}}</button>页
19 <button v-on:click= "changepage(pagenumber += 1)">下一页</button>
20 前往第
21 <input name="inputpagenum" type="number" v-on:change="changepage($event.target.value)" v-model="value" onkeypress="return( /[\d]/.test(string.fromcharcode(event.keycode) ) )" min="0"/>页 总共
22 <button disabled="disabled">{{size}}</button>页
23 </div>
24 </div>
25 </template>
26
27 <script>
28 export default {
29 data() {
30 return {
31 winners: [], // 要展示的中奖人
32 groups: new array(), // 按条件分组后的元素集合
33 pagenumber: 1, // 页码
34 items: 3, // 展示条数
35 value: 1, // input 值
36 size: '', // 分组需要的空间大小
37 // 后台数据
38 data: [
39 { id: 0, name: "张三1", age: 17 },
40 { id: 1, name: "张三2", age: 18 },
41 { id: 2, name: "张三3", age: 19 },
42 { id: 3, name: "张三4", age: 20 },
43 { id: 4, name: "张三5", age: 21 },
44 { id: 5, name: "张三6", age: 17 },
45 { id: 6, name: "张三7", age: 18 },
46 { id: 7, name: "张三8", age: 19 },
47 { id: 8, name: "张三9", age: 20 },
48 { id: 9, name: "张三10", age: 21 }
49 ]
50 }
51 },
52
53 created: function () {
54 // 此时才加载 data 数据
55 this.winnergroup();
56 },
57
58 methods:{
59 // 改变展示条数
60 changeitems: function(e) {
61 console.log("changeitems" + e);
62 // 必须要清空 groups 否则会带入上次的分组 （原因 push）
63 this.groups = [];
64 this.items = e;
65 this.winnergroup();
66 },
67 // 设置、选择页数
68 changepage(e) {
69 console.log("changepage:" + e);
70 this.pagenumber = e;
71 // 选择、输入 pagenumber 值大于、小于 所需空间 size 将其置为 1
72 if(this.pagenumber > this.size || this.pagenumber <= 0) {
73 this.pagenumber = 1;
74 }
75 this.winners = this.groups[this.pagenumber-1].onegroup;
76 // 前面页数改变后 input 框页数也要改变
77 this.value=this.pagenumber;
78 },
79 // 按展示条目分组默认 3 个一组
80 winnergroup() {
81 console.log(this.items+"items")
82 let winnercount = this.data;
83 let objlist = new object();
84 if(winnercount.length > 0) {
85 this.size = winnercount.length/this.items==0 ? winnercount.length/this.items : math.ceil((winnercount.length/this.items));
86 // 控制外层及内循环开始遍历的基数
87 for (let i = 1; i <= this.size; i++) {
88 let temparr = []; // 分好的单个数组
89 let temp; // 遍历次数
90 if (this.items * i > winnercount.length) {
91 temp = winnercount.length;
92 } else {
93 temp = this.items * i;
94 }
95 // 三个打包成一组
96 for (let j = this.items * (i - 1); j < temp; j++) {
97 temparr.push(winnercount[j]) ;
98 }
99 let newobj = new object();
100 // newobj. onegroup = json.stringify(temparr);
101 newobj.onegroup = temparr;
102 this.groups.push(newobj);
103 }
104 console.log(this.groups)
105 this.winners = this.groups[this.pagenumber-1].onegroup;
106 // objlist.data = this.groups;
107 }
108 }
109 }
110 }
111 </script>
112
113 <style>
114 /* 去掉上下箭头 */
115 input::-webkit-outer-spin-button,
116 input::-webkit-inner-spin-button {
117 -webkit-appearance: none;
118 }
119 input[type="number"]{
120 -moz-appearance: textfield;
121 }
122
123 .condition{
124 float: right;
125 }
126
127 input, select{
128 /* 元素的任何内边距和边框都将包括在已设定的宽度和高度内 */
129 box-sizing: border-box;
130 text-align: center;
131 padding: 0px;
132 border: 1px solid rgb(169, 169, 169);
133 height: 23px;
134 width: 30px;
135 }
136 </style>
如对本文有疑问， 点击进行留言回复！！
《Android移动应用基础教程》（Android Studio）（第二版）黑马教程 课后题答案 第11章
【我的架构师之路】- go1.14.16源码分析笔记之源码目录
网友评论