【vue的事件处理，实现年月日三级联动】

最新推荐文章于 2023-07-27 11:28:28 发布

莴笋炒鸡蛋

最新推荐文章于 2023-07-27 11:28:28 发布

阅读量1.2k

点赞数

分类专栏： vue3入门与提高文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_37932555/article/details/129344951

版权

vue3入门与提高专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、单击事件

例题1：要求：在页面放置一个文本框和一个按钮，单击按钮后，给文本框赋值任意值

步骤1：完成指定功能

步骤2：简写v-bind和v-on

简写：v-bind:value简写成 :value，v-on:click简写成@click，如下图第12,13两行：在这里插入图片描述

步骤3：简写methods中的函数

在这里插入图片描述

例题2：在页面放置一个div，里面任意内容，单击按钮，给div添加背景色

第17行：color1是在第26行定义的变量
第18行：单击此按钮后，执行29行的函数，函数里，给v赋值，同时给变量color1赋值为在第10行创建的样式的名称
第31行：第18行单击事件中，给color1变量赋值。值得来源是滴10行的样式名称
单击后效果如下

二、change事件

例题1：年月日三级联动

1、设置年份位置列表框显示

步骤1：基本显示功能

分析：年份位置的列表框，需要从1990年到当期年份，我们采用数组的方式，计算出年份应该出现的数字
下面代码中：

第13行：:value是v-bind:value的缩写
第24行：通过计算属性，创建变量year，返回的是数组格式，数组内容就是年份的列表
第25行：创建数组，数组名是yy
第26行：new Date()是获取当期系统日期。getFullYear()获取当期系统日期的年份
第27行：利用for循环，给年份的数组yy赋值
第30行：返回年份的数组yy。yy也就相当于是第25行year这个变量的值

步骤2：在步骤1完成后，年份是从1990开始显示，现在需要让年份从当期显示年份的20年位置开始显示

分析：假设使用该功能的都是20岁以上的人群，为了更方便让用户选择，所以，假设当期是2022年，那么年份列表框默认显示的年份应该是2022-20=2002年即可

第13行：:selected是v-bind:selected的缩写，作用是设置默认被选中的列表框选项。
第13行：yy是v-for中定义的变量，year是第24行表示年份的数组，selectedYear是计算出距离列表框最后一年的倒数20年是year数组的那个位置，也就是对应到数组的值就是年份
第32行：添加计算属性selectedYear，用于计算要默认显示年份在数组中的下标
第34行：this.year.length是求出数组的长度，也就是一共有多少年，长度减去20，就相当于找到距离最后一年相差20年的这个位置的坐标，该变量表示的坐标在第13行使用

2、月份列表框

分析：该列表框相对简单，因为不管哪一年，都是1-12月份
第16行：value=“mm”：作用是为了接收月份列表框选择后的值在这里插入图片描述

3、天数列表框

分析：该列表框，要考虑大小月份和是否是闰年，天数有28,29,30,31四种情况的变化，也就是当年份或者月份列表框的显示发生改变以后，天数列表框的总天数对应发生改变
第19行：使用变量day表示该月份的总天数。不能直接写成常量31的原因是：每个月的天数不一样。day表示不同月份的天数
在这里插入图片描述

4、月份改变后，天列表框的天数对应发生改变

步骤1：获取当前所选择的月份

下面代码
都15行：@change事件中执行的函数changeDay，括号里的参数$event是内置事件源不能个改变，区分大小写
第16行：@value绑定变量mm，是用来给天数列表框赋值
在这里插入图片描述
下面代码：
第47行：接收上图第15行的参数，传递到下图第46行的event中。event.target.value表示或者列表框选择的值

步骤2：月份改变以后，天数列表框的天数自动发生改变（暂时没有考虑年份的闰年）

第48行：*1的目的是将列表框取出的值从文本类型转化成数字类型，也可以用函数直接转换类型
在这里插入图片描述
截至到此处的参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       <select >
         <option v-for="yy in year" :value="yy" :selected="yy===year[selectedYear]">{{yy}}</option>
       </select>
       <select  @change="changeDay($event)">
        <option v-for="mm in 12" :value="mm">{{mm}}</option>
       </select>
       <select >
        <option v-for="dd in day" :value="dd">{{dd}}</option>
       </select>
    </div>
</body>
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            yy:0,
            mm:0,
            day:31
        },
        computed:{
            year:function(){
                let yy=new Array();
                let endYear=new Date().getFullYear();
                for(let i=1990;i<=endYear;i++){
                    yy[i-1990]=i;
                }
                return  yy;
            },
            selectedYear(){
                //console.log(this.year.length-20)
                return this.year.length-20;
            }
        },
        methods:{
            changeDay(event){
                //console.log("月份="+event.target.value)
                let month=event.target.value*1;
                console.log("月份="+month)
               if(month===1 ||month===3 ||month===5 ||month===7 ||month===8 ||month===10 ||month===12){
                    this.day=31;
               }else if(month===4 ||month===6 ||month===9 ||month===11 ){
                    this.day=30;
               }else{
                    this.day=28;
               }
            }
        },
    })
</script>
</html>

5、利用v-model双向绑定，获取年份和月份的值

分析：在选择月份列表框的时候，获取年份列表框的值，以此判断是否是闰年，决定2月是28天还是29天（因为此处还没有给年份列表框添加事件，所以，必须是先选择年份列表框，再选择月份列表框，在后面步骤给年份列表框添加事件后，先选择月份或者年份都可以）
v-model双向绑定的意思是：不仅可以赋值，取值也依然是这个变量。也就是这个变量，既可以赋值也可以取值

步骤1：修改html代码和在data中添加变量用于年份列表框的双向绑定

下面代码中：
第30行：定义变量并赋初值
第12行：添加v-model双向绑定。在这里插入图片描述

步骤2：测试在月份列表框的change事件中，是否可以获取年份的值

下面代码第49行是测试的语句，在浏览器的控制台显示在这里插入图片描述

步骤3：根据年份的值判断闰年的2月天数

第58行：利于三目运算符，判断是否是闰年，赋值28或29给变量this.day 在这里插入图片描述
注意：步骤3在测试时候，因为年份还没有事件，所以必须先选择年份，在选择月份才能测试成功
截至到此步骤的参考代码
截至到此步骤的参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       <select v-model="selectYear">
         <option v-for="yy in year" :value="yy" :selected="yy===year[selectedYear]">{{yy}}</option>
       </select>
       <select  @change="changeDay($event)">
        <option v-for="mm in 12" :value="mm">{{mm}}</option>
       </select>
       <select >
        <option v-for="dd in day" :value="dd">{{dd}}</option>
       </select>
    </div>
</body>
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            yy:0,
            mm:0,
            day:31,
            selectYear:2003
        },
        computed:{
            year:function(){
                let yy=new Array();
                let endYear=new Date().getFullYear();
                for(let i=1990;i<=endYear;i++){
                    yy[i-1990]=i;
                }
                return  yy;
            },
            selectedYear(){
                //console.log(this.year.length-20)
                return this.year.length-20;
            }
        },
        methods:{
            changeDay(event){
                //console.log("月份="+event.target.value)
                // console.log("年份="+this.selectYear)
                let month=event.target.value*1;
                let year=this.selectYear
                console.log("月份="+month)
               if(month===1 ||month===3 ||month===5 ||month===7 ||month===8 ||month===10 ||month===12){
                    this.day=31;
               }else if(month===4 ||month===6 ||month===9 ||month===11 ){
                    this.day=30;
               }else{
                    this.day=year % 4==0?29:28;
               }
            }
        },
    })
</script>
</html>

6、给年份列表框添加事件

分析：在步骤5实现以后，只能先选择年份，再选择改变月份，才能使天数发生改变，当我们给年份列表框也添加change事件后，无论先选择年还是月，都可以是天数列表框正确

步骤1：修改html代码

下面第12和第15行：@change事件使用共同的事件。
第12和第15行原先月份列表框的事件参数，此处取消，改变为使用v-model双向绑定

步骤2：获取年份和月份列表框的值

第51、52两行是获取v-model双向绑定的值，赋值给此处的局部变量month和year 在这里插入图片描述
完整参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       <select  @change="changeDay()"  v-model="selectYear" >
         <option v-for="yy in year" :value="yy" :selected="yy===year[selectedYear]">{{yy}}</option>
       </select>
       <select  @change="changeDay()"  v-model="selectMonth">
        <option v-for="mm in 12" :value="mm">{{mm}}</option>
       </select>
       <select >
        <option v-for="dd in day" :value="dd">{{dd}}</option>
       </select>
    </div>
</body>
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            yy:0,
            mm:0,
            day:31,
            selectYear:2003,
            selectMonth:1
        },
        computed:{
            year:function(){
                let yy=new Array();
                let endYear=new Date().getFullYear();
                for(let i=1990;i<=endYear;i++){
                    yy[i-1990]=i;
                }
                return  yy;
            },
            selectedYear(){
                //console.log(this.year.length-20)
                return this.year.length-20;
            }
        },
        methods:{
            changeDay(){
                //console.log("月份="+event.target.value)
                // console.log("年份="+this.selectYear)
                let month=this.selectMonth
                let year=this.selectYear
                // console.log("月份="+month)
               if(month===1 ||month===3 ||month===5 ||month===7 ||month===8 ||month===10 ||month===12){
                    this.day=31;
               }else if(month===4 ||month===6 ||month===9 ||month===11 ){
                    this.day=30;
               }else{
                    this.day=year % 4==0?29:28;
               }
            }
        },
    })
</script>
</html>

三、键盘事件

1、常见的键盘事件

keydown:按下键盘，不需要抬起来就会触发
keyup:按下键盘，等键盘抬起来才会触发
keypress：

例题1：按任意键会在浏览器控制台显示提示

在这里插入图片描述
或者：下图第12行代码，与上图第12行相同。此处是带参数的完整写法，参数必须是$event

例题2：只有按回车才会在浏览器控制台显示提示

方法1：例如keyCode与if判断实现

下面代码

第12行：@keyup的完整写法是：@keyup="showInfo( $e v e n t) 。函数名是任意起名，括号里的参数$ event是内置参数表示事件源

方法2：按键别名

下图第12行，按别名，制定某个按键响应键盘事件
在这里插入图片描述
Vue中常用的按键别名，通过上述@keyup.enter来控制键盘事件的方式就是Vue中的按键别名，那么Vue中常用的按键别名有以下几种：

回车：enter
删除：delete (捕获"删除"和"退格"键)
退出：esc
空格：space
换行：tab（特殊：必须配合keydown使用）
上：up
下：down
左：left
右：right

2、Vue中未提供别名的按键处理-1

Vue中未提供别名的按键可以使用按键原始的key值取取值

例题1：下面代码，按字母a的时候，执行showInfo函数

在这里插入图片描述

例题2：使用keyCode指定具体的按键（不推荐）

在这里插入图片描述

3、Vue中未提供别名的按键处理-2

如果按键是多个单词的，则单词和单词之间需要用-相隔,且多个单词都要转小写

例题1:下面代码，按大写锁定键后，执行showInfo函数

在这里插入图片描述

4、显示所按按键的key

在这里插入图片描述

5、Vue中用法特殊的系统修饰键：ctrl,alt,shift,meta（window徽标键，4个方块的那个）

(1).配合keyup使用：按下功能键的同时，再按下其他键，随后释放其他键，事件才会被触发。
(2).配合keydown使用：正常触发事件。

例题1:ctrl+任意键，执行showInfo函数

在这里插入图片描述

例题2:ctrl+q，执行showInfo函数

6、自定义按键别名并绑定

Vue.config.keyCode.自定义键名=键盘码可以定制键别名字
在这里插入图片描述

7、给body或者doucument绑定键盘事件

一般都是给一个input添加键盘事件，从而用keyCode来做一些函数的处理，有时候，vue中需要给body或者doucument绑定键盘事件，可以用下面的方法
下面代码：

第23行：mounted：html加载完成后对html的dom节点进行需要的操作执行，也可以理解为初始化
第24行：给document添加事件监听，添加keydown事件，执行24行后面的匿名函数

上面截图和下面截图的代码作用一样，区别是第24-26行位置的代码，上图用的是js老版本的写法，下图用的是新版本箭头函数的写法（暂时还没讲到箭头函数，后面会将,已经会的可以直接使用）