（4）Vue-计算属性computed

最新推荐文章于 2024-05-23 16:27:15 发布

原创最新推荐文章于 2024-05-23 16:27:15 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用Vue.js创建一个简单的表单，实现实时姓名拼接。通过实例演示了如何定义和使用计算属性来简化数据绑定。适合初学者了解计算属性的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="demo">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName">
    姓名：<span>{{firstName}}-{{lastName}}</span>
</div>

<script type="text/javascript">
    new Vue({
        el:"#demo",
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            //完整写法
            // fullName:{
            //     get(){
            //         return this.firstName+this.lastName
            //     },
            //     set(){
            //
            //     }
            // }
            //简写
            fullName(){
                    return this.firstName+this.lastName
                }
        }
    })
</script>
    </body>
    </html>