Vue·事件监听

青鸟遇鱼

已于 2022-06-19 12:02:07 修改

阅读量341

点赞数

分类专栏： S1-DD-前端文章标签： vue.js javascript 前端

于 2022-06-19 11:48:15 首次发布

本文链接：https://blog.csdn.net/qq_43308318/article/details/125356250

版权

S1-DD-前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue·事件监听

使用keyup进行监听方法

<!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='./js/vue2.js'></script> // 下载到本地使用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- router地址 -->
    <script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.min.js"></script>
    </head>
    <body>
    <hr>
 

    // @keyup 监听事件方法
    <div id='app'>   
        <input type="text" name="" v-model="firstname" @keyup="result" /> + 
        <input type="text" name="" v-model="lasenaem"  @keyup="result" /> =
        <input type="text" name="" v-model="fullname"  @keyup="result" />
        
      
    </div>
</body>
 
    <script type="text/javascript">
        
        const vm = new Vue({
            el: '#app', // 获取element元素
            data: {
                firstname:'',
                lasenaem:'',
                fullname:''
            },
            methods:{
                result(){
                    this.fullname = this.firstname+this.lasenaem;
                }
            }
        })
    </script>

</html>

使用watch监听

<!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='./js/vue2.js'></script> // 下载到本地使用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- router地址 -->
    <script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.min.js"></script>
    </head>
    <body>
    <hr>
    // @keyup 监听事件方法，如果使用watch就不需要使用keyup这个监方法
    <div id='app'>   
        <input type="text" name="" v-model="firstname"   /> + 
        <input type="text" name="" v-model="lasenaem"    /> =
        <input type="text" name="" v-model="fullname"    />
    </div>
</body>
 
    <script type="text/javascript">
        
        const vm = new Vue({
            el: '#app', // 获取element元素
            data: {
                firstname:'',
                lasenaem:'',
                fullname:''
            },
            // 使用keyup进行监听方法
            // methods:{
            //     result(){
            //         this.fullname = this.firstname+"-"+this.lasenaem;
            //     }
            // },

            //what  方法一
            // watch:{ // 标签中就不需要使用@keyup="" 进行监听了
            //         firstname:function(){
            //             this.fullname = this.firstname+"-watch-"+this.lasenaem;
            //         },
            //         lasenaem:function(){
            //             this.fullname = this.firstname+"-watch-"+this.lasenaem;
            //         }
            //     }

            // what  方法二
            watch:{ // 标签中就不需要使用@keyup="" 进行监听了 newVal新值 oldVal老值
                    firstname:function(newVal,oldVal){
                        console.log(newVal,oldVal);
                        this.fullname = newVal+"-watch-"+this.lasenaem;
                    },
                    lasenaem:function(newVal,oldVal){
                        console.log(newVal,oldVal);
                        this.fullname = newVal+"-watch-"+this.lasenaem;
                    }
                }
        })
    </script>
</html>

计算属性

会将返回值的结果保存到磁盘缓存中，下次直接读取缓存中的数据

<!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='./js/vue2.js'></script> // 下载到本地使用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- router地址 -->
    <script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.min.js"></script>
</head>
<body>
    <hr>
 

    // @keyup 监听事件方法，如果使用watch就不需要使用keyup这个监方法
    <div id='app'>   
        <input type="text" name="" v-model="firstname"   /> + 
        <input type="text" name="" v-model="lasenaem"    /> =
        <input type="text" name="" v-model="fullname"    />
        
      
    </div>
</body>
 
    <script type="text/javascript">
        
        const vm = new Vue({
            el: '#app', // 获取element元素
            data: {
                firstname:'',
                lasenaem:'',
                // fullname:'' 将此变量放到computed中
            },
             
            
            // 会将返回值的结果保存到磁盘缓存中，下次直接读取缓存中的数据
            computed:{
                'fullname':function(){
                    return this.firstname +'::computer::'+ this.lasenaem ;
                }
            }
        })
    </script>
</html>