vue基础实践1: computed计算属性

最新推荐文章于 2022-02-12 14:19:50 发布

公子清

最新推荐文章于 2022-02-12 14:19:50 发布

阅读量190

点赞数

分类专栏： Vue系列实践系列文章标签： vue vue计算属性

本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/106519670

版权

Vue系列同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

实践系列

33 篇文章 0 订阅

订阅专栏

vue基础实践1: computed计算属性

1.计算属性：它不是方法是一个属性，所有在视图中调取的时候不能加括号执行,toUp和DATA中的text一样，都会挂载在实例上，它存储的值是对应的方法返回的结果（getter函数出来的结果）

2.计算属性有自己的缓存处理：第一次获取toUp这个属性值，会关联某个响应式数据（text），当第一次结果获取后，会把这个结果缓存下来；后期视图重新渲染，首先看text值是否发生改变，如果发生更改，会重新计算toUp属性值，如果没有更改，则还会拿上次缓存的结果进行渲染；


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     [v-cloak] {
     display:none }
    </style>
</head>
<body>
    <!-- 
        计算属性
     -->
       <div id="app">
           <input type="text"  v-model="text">
           <br>
            <span v-cloak v-text='text'></span> 
       </div>
</body>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
      let vm = new Vue({
          el:'#app',
          data:{
              //=>响应式数据：data中的准备的要在视图中渲染的数据（model）
            text:'',  
          },
          computed:{
              //=>计算属性：它不是方法是一个属性，所有在视图中调取的时候不能加括号执行,toUp和DATA中的text一样，都会挂载在实例上，它存储的值是对应的方法返回的结果（getter函数出来的结果）
             //=>计算属性有自己的缓存处理：第一次获取toUp这个属性值，会关联某个响应式数据（text），当第一次结果获取后，会把这个结果缓存下来；后期视图重新渲染，首先看text值是否发生改变，如果发生更改，会重新计算toUp属性值，如果没有更改，则还会拿上次缓存的结果进行渲染；
              toUp() {
                return this.replace(/\b[a-zA-Z]+\b/g,item=>{
                   return item.charAt(0).toUpperCase()+item.substring(1);
              });
              }
          },
          methods:{
              //=>都会挂载到实例，不能和data中的属性名冲突：这里的制定的方法是普通方法，可以在视图中调取使用，也可以在其他方法中调取使用
              toUp(value){
              
            }
          },
          filters :{
              //=>设置过滤器：把需要在视图中渲染的数据进行二次或者多次的处理
              filterA(value) {
                  //=> 需要过滤的数据 return返回的事过滤后的结果
                  return value.replace(/\b[a-zA-Z]+\b/g,item=>{
                   return item.charAt(0).toUpperCase()+item.substring(1);
              });
              },
              //反转首字母大学
              filterB(value) {
                  return value.split('').reverse().join('');
              },
              picHandle(value){
                  return value.length===0?'http://wwww.baidu.com':value;
              }
          }
      });
</script>
</html>

运行结果如下：
在这里插入图片描述

公子清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础实践1: computed计算属性

vue基础实践1: computed计算属性1.计算属性：它不是方法是一个属性，所有在视图中调取的时候不能加括号执行,toUp和DATA中的text一样，都会挂载在实例上，它存储的值是对应的方法返回的结果（getter函数出来的结果）2.计算属性有自己的缓存处理：第一次获取toUp这个属性值，会关联某个响应式数据（text），当第一次结果获取后，会把这个结果缓存下来；后期视图重新渲染，首先看text值是否发生改变，如果发生更改，会重新计算toUp属性值，如果没有更改，则还会拿上次缓存的结果进行渲染
复制链接

扫一扫