Vue中的computed的用法

勇敢小陈

已于 2022-07-19 16:32:18 修改

阅读量1.7w

点赞数 7

文章标签： vue.js 前端 javascript

于 2022-07-19 15:55:12 首次发布

本文链接：https://blog.csdn.net/ct5211314/article/details/125873292

版权

computed又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去。

一、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>

当我们动态的去更改surname或name时，都会引起fullName的改变。

二、computed的完整形式

为什么说是computed的完整形式呢，因为computed的简写形式只是单独的完成了读的功能，二没办法去更改surname和name的值，下面我们进行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:{
      get(){
        return this.surname+'~'+this.name
      },
      set(value){
        var arr=value.split('~')
        this.surname=arr[0]
        this.name=arr[1]
      }
    }
  },
  data(){
    return{
      surname:'勇敢',
      name:'小陈',
    }
  }
}
</script>

<style>

</style>