下拉框的年限循环（2017~1917）vue2.0--飞机票项目

来源：互联网发布：西安软件科技学院校长编辑：程序博客网时间：2024/04/29 07:00

Hello，项目开发过程中，需要很多项目需要是不能使用插件实现的，是需要我们通过自己去手写的。比如今天我们要实现一个下拉的年限范围。（出生日期、证件日期……）

还是上图先看效果：
这里写图片描述

我们要循环出一个范围年限，分析需要的方法：
1. 我们需要v-for循环
2. 需要用到我们的计算属性 computed
3. 在JS中我们还需要用 for循环

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="js/vue.js"></script></head><body>    <div id="box">        <select v-model='year'>            <option v-for='aa in msg'>                {{aa}}            </option>        </select>        <select v-model='year2'>            <option v-for='aa in msg2'>                {{aa}}            </option>        </select>    </div></body><script type="text/javascript">    new Vue({        el:'#box',        data:{            msgs:[],            msgs2:[],            year:'',            year2:''        },        methods:{            add(){                console.log(new Date().getFullYear())            }        },        computed:{            msg:function () {                var date = new Date().getFullYear()                for (var i = 0; i < 100; i++) {                    this.msgs.push(date)                    date -= 1;                }                return this.msgs            },            msg2(){                var date = new Date().getFullYear();                for (var i = 0; i <10; i++) {                    this.msgs2.push(date)                    date += 1                }                return this.msgs2            }        }    })</script></html>

详细讲解：
1.我们循环的数据必须是数组形式 ==> msgs:[ ]
2.在计算属性里面我们首先获取当前时间年限 ==> var date = new Date().getFullYear()
3. 我们通过for循环如果需要循环多少次就写多少次，最后把我们循环的内容添加到我们定义的数据内 ==> this.msgs.push(date)
4. 最后一定不要忘记 return this.msgs 用计算属性绑定 msgs 赋值给 msg 在循环在页面

总结：我写了俩个案例一个是往后推100年一个是往前进10年（出生日期、护照期限）

大家好，我是杨小宝！感谢您的阅读！也感谢一起学习开发vue2.0的学习！

（虽然都是一些很简单的demo，不是让大家学习这个demo怎么写，而是一种思考问题的思路，思维）

阅读全文

0 0