Vue之计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/CSNMD/article/details/144562782

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue学习</title>
  <script src="../lib/vue2/vue.js"></script>

</head>
<body>
  <div id="app">
    姓：<input type="text" v-model="first_name"></input><br/>
    名：<input type="text" v-model="last_name"></input><br/>
    全名：{{fullName}}<br/>
    全名：{{fullName2}}<br/>
  </div>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#app',
      data(){
        return {
          first_name: '张',
          last_name: '三'
        }
      },
      computed: {
        fullName(){
          return this.first_name + this.last_name
        },
        fullName2:{
          get(){
            return this.first_name + this.last_name
          }
          
        }
      }
    })
  </script>
</body>
</html>

当我们在页面上的某个值是通过二次加工而来的情况下，

我们当然可以直接把那个fullName写成{{first_name+last_name}}，但这样不够优雅。

所以我们引入计算属性的概念。

把加工逻辑放在我们定义的函数上