名称案例-使用keyup事件实现1 和名称案例-使用watch监听文本框数据的变化2

Posted 2020-12-30 jiahaojava

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了名称案例-使用keyup事件实现1 和名称案例-使用watch监听文本框数据的变化2相关的知识，希望对你有一定的参考价值。

技术分享图片


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="firstname" @keyup="nameUp"/>+
    <input type="text" v-model="lastname" @keyup="nameUp"/>=
    <input type="text" v-model="fullname"/>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            mes: "hello Vue",
            firstname: "",
            lastname: "",
            fullname: ""

        },
        methods: {
            nameUp() {
                this.fullname = this.firstname + this.lastname
            }
        }
    });
</script>
</html>、
--------------------------------------------名称案例-使用watch监听文本框数据的变化2------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="firstname"/>+
    <input type="text" v-model="lastname"/>=
    <input type="text" v-model="fullname"/>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            mes: "hello Vue",
            firstname: "",
            lastname: "",
            fullname: ""

        },
        methods: {

        },
        watch:{/*使用这个属性可以监听data中指定数据的变化*/
            firstname(newVal,oldVal){/*newVal表示新值  oldVal表示旧值*/
                this.fullname = this.firstname + this.lastname
            }
            /*lastname省略*/
        }
    });
</script>
</html>

--------------------------------------------

监视路由地址的改变

watch可以监听非实体改变

--------------------------------------------

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
</head>
<body>
<div id="app">
    {{mes}}
    <router-link to="/login/123/ls">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>
</body>
<script>
    var login = {
        template: "<div>我是登录组件</div>",

    };
    var register = {
        template: "<div>我是注册组件</div>",
    };
    var router = new VueRouter({
        routes: [
            {path: "/login/:id/:name", component: login},
            {path: "/register", component: register}
        ]
    });
    new Vue({
        el: "#app",
        data: {
            mes: "hello Vue"
        },
        components: {
            login,
            register
        },
        router,
        watch:{
            "$route.path":function(newVal,oldVal){/*newVal表示新值  oldVal表示旧值*/
                console.log(newVal +"----"+oldVal)
            }
           
        }
    });
</script>
</html>

$route.path不能改动

以上是关于名称案例-使用keyup事件实现1 和名称案例-使用watch监听文本框数据的变化2的主要内容，如果未能解决你的问题，请参考以下文章

JQuery——键盘事件.keydown().keyup()和.keypress()

vue实现404页面配置自带的回车事件@keyup.enter

名称案例-使用keyup事件实现1 和 名称案例-使用watch监听文本框数据的变化2

名称案例-使用keyup事件实现1 和名称案例-使用watch监听文本框数据的变化2