四、vue计算属性的使用

周国良

已于 2022-03-25 15:54:53 修改

阅读量5.1k

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-03-25 15:47:59 首次发布

本文链接：https://blog.csdn.net/weixin_41087914/article/details/123722340

版权

通常，在模板中可直接通过插值语法显示data中的属性，但是在某些情况，需要将某些数据进行转化后显示或者将多个数据结合起来显示。

计算属性的基本使用

 <body>
        <div id="app">
            <!-- 将张、三 拼接成一个完整的名字，在不使用计算属性，可以有以下写法 -->
            <h2>{
  {surname + ' ' + name}}</h2>
            <h2>{
  {surname}} {
  {name}}</h2>
            <!--也可以使用methods 的方式写 -->
            <h2>{
  {getFullName()}}</h2>
            <!-- 以上方法第一、第二种方法，过于冗长繁琐，第三种方法，不符合阅读习惯，因为通常我们使用Mustache会直接插值，而不是调用方法 -->
            <!-- 因此，就需要使用计算属性 -->
            <h2>{
  {fullName}}</h2>
        </div>
        <script src