Vue——24——名称案例使用keyup和watch实现

最新推荐文章于 2023-08-21 20:16:49 发布

野生小米椒

最新推荐文章于 2023-08-21 20:16:49 发布

阅读量165

点赞数

分类专栏： VUE框架

本文链接：https://blog.csdn.net/x1037490413/article/details/107447430

版权

VUE框架专栏收录该内容

33 篇文章 0 订阅

订阅专栏

使用keyup实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
  
        <!--  我们要监听到文本框数据的改变,这样才能知道什么时候去拼接处一个fullname-->
        <!-- 如何监听到文本框的数据改变呢 -->
    <input type="text" v-model="firstname" @keyup="getFullname">+
    <input type="text" v-model="lastname" @keyup="getFullname">=
    <input type="text" v-model="fullname">
    </div>
   
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstname:"",
                lastname:"",
                fullname:""
            },
            methods: {
                getFullname(){
                    this.fullname=this.firstname+this.lastname
                }
            },
            
        })
    </script>
</body>

</html>

使用watch监听文本框数据的变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">

        <!--  我们要监听到文本框数据的改变,这样才能知道什么时候去拼接处一个fullname-->
        <!-- 如何监听到文本框的数据改变呢 -->
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname" style="width: 100%;">
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lastname: "",
                fullname: ""
            },
            methods: {},
            //使用watch这个属性，可以监听data中指定数据的变化，然后触发这个watch中对应function处理函数
            //属性中间有横线的时候要加引号，没有横线时可加可不加
            //这个属性值有变化时 就会触发它的function
            watch: {
                'firstname': function (newVal) {
                    // console.log('监听到了firstname的变化');
                    this.fullname = newVal + this.lastname
                },
                'lastname': function (newVal) {
                    this.fullname = this.firstname + newVal
                }
            }


        })
    </script>
</body>

</html>