computed计算属性的使用

最新推荐文章于 2025-07-09 12:40:12 发布

原创最新推荐文章于 2025-07-09 12:40:12 发布 · 1.5k 阅读

0 ·

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

收录于

Vue.js

当前文章被收录于：

Vue.js

11 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个使用Vue.js和Vue Router实现的简单双向数据绑定示例。通过两个输入框分别绑定firstname和lastname，计算属性fullname实现了两者的连接显示。这展示了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:"",

            },
            methods:{
            },
            computed:{
                "fullname":function () {
                    return this.fullname = this.firstname + '-' + this.lastname

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