watch监视路由地址改变

最新推荐文章于 2023-09-27 10:45:48 发布

原创最新推荐文章于 2023-09-27 10:45:48 发布 · 505 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue.js

本文详细介绍了一个使用Vue.js实现的双向数据绑定示例，通过输入框动态更新姓名的组成部分，展示如何监听并响应数据变化，实现前端数据的实时同步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-dev/vue-dev/dist/vue.min.js"></script>
    <script src="vue-router.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>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                firstname:"",
                lastname:"",
                fullname:"",
            },
            methods:{
            },
            watch:{
                "firstname":function () {
                    this.fullname = this.firstname + '-' +this.lastname
                },
                "lastname":function (newVal) {
                    this.fullname = this.firstname + '-' +newVal
                },

            }
        })
    </script>
</body>
</html>