computed的用法

最新推荐文章于 2024-03-20 10:41:08 发布

程序猿向前跑

最新推荐文章于 2024-03-20 10:41:08 发布

阅读量3.9k

点赞数

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_46199553/article/details/129379437

版权

Vue 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

1、计算属性 computed

computed用来监控自己定义的变量，该变量不在data里面声明，
直接在computed里面定义，进行处理后返回一个结果值
基础用法：

<template>
  <div>
    <div>姓：<input type="text" v-model="surname"></div>
    <div>名：<input type="text" v-model="name"></div>
    <div>姓名：<input type="text" v-model="fullName"></div>
  </div>
</template>
 
<script>
export default {
  computed:{
    fullName(){
      return this.surname+'~'+this.name
    }
  },
  data(){
    return{
      surname:'勇敢',
      name:'小陈',
    }
  }
}
</script>
 
<style>
 
</style>

<body>
  <div id="example">
    <!-- 显示：a:1 -->
    <p>a:{{ plus }}</p>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      a: 0,
    },
    computed: {
      plus: function () {
        return this.a + 1;
      },
    },
  });
  console.log(vm); // // 查看控制台输出的vm，可以看到它有一个属性是：plus:1，⚠️注意是属性
</script>