Vue——计算属性的setter和getter——2020.11.15

最新推荐文章于 2024-04-15 20:26:27 发布

Blockchain_KT

最新推荐文章于 2024-04-15 20:26:27 发布

阅读量227

点赞数 1

分类专栏： Vue.js-实战开发文章标签： vue web html5 css3 es

本文链接：https://blog.csdn.net/weixin_43402353/article/details/109701062

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

一丶计算属性的setter和getter

每个计算属性都包括一个getter和一个setter
语法糖情况下，表示getter，取数据
setter一般不用

二丶代码实战

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/15 10:09-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
<!--  <h2>{{fullName}}</h2>-->
  <h2>{{fullName}}</h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:'Key',
      lastName:'Ting'
    },
    computed:{
      //不加动词，这是计算属性，那么最好以属性命名
      //语法糖，简写
      // fullName(){
      //   return this.firstName+" "+this.lastName
      // }
      fullName:{
        //计算属性中get方法一般不使用，只是一个只读属性
        set(newValue){
          console.log('-------------',newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get(){
          return this.firstName+" "+this.lastName
        }
      }
    }
  })
</script>
</body>
</html>

三丶运行结果

在这里插入图片描述

四丶Console演示setter方法

在这里插入图片描述

Blockchain_KT

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue——计算属性的setter和getter——2020.11.15

一丶计算属性的setter和getter每个计算属性都包括一个getter和一个setter语法糖情况下，表示getter，取数据setter一般不用二丶代码实战<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫