12. vue 计算属性和过滤器

最新推荐文章于 2022-09-14 18:54:41 发布

神奇洋葱头

最新推荐文章于 2022-09-14 18:54:41 发布

阅读量330

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq28129019/article/details/118517086

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

1. vue官方计算属性
- 1.1 计算属性示例
- 1.2 计算属性和methods函数
2. vue 过滤器
3. 全局过滤器和局部过滤器
- 3.1 全局过滤器
- 3.2 局部过滤器

1. vue官方计算属性

https://cn.vuejs.org/v2/guide/computed.html#计算属性

1.1 计算属性示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue的基本使用</title>
  <!--步骤1 引入vue.js-->
  <script src="js/vue.js"></script>
  <!--也可以使用在线引用-->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
</head>
<body>
  <div id="app">
    <ul>
      <li>名字: {{name}}</li>
      <li>年龄: {{age}}</li>
      <li>十年之后 {{add}} 岁</li>
    </ul>
  </div>
  
  <script>
    //步骤2 创建vue实例对象
    let vue = new Vue({
      //步骤3 指定vue对象控制的HTML区域
      el: "#app",
      //步骤4 指定vue对象控制的HTML区域的数据
      data: {
        name: "lchh",
        age: 18,
      },

      //专门用于处理监听事件的回调
      methods: {
        
      },

      // 专门用于定义计算属性
      computed: {
        add: function(){
          let result = this.age+10;
          return result;
        }
      },

    });
  </script>

</body>
</html>

在这里插入图片描述

1.2 计算属性和methods函数

计算属性只要返回结果没有发生变化,那么计算属性只会执行一次
由于计算属性会将结果缓存,如果返回的数据不经常改变,那么使用计算属性会提高性能

2. vue 过滤器

2.1 过滤器作用

一般用于格式化插入的文本数据

2.2 过滤器常用位置

{{}} 双花括号中
v-bind 表达式的尾部
过滤器官方文档

2.3 创建过滤器(全局过滤器)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue的基本使用</title>
  <!--步骤1 引入vue.js-->
  <script src="js/vue.js"></script>
  <!--也可以使用在线引用-->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
</head>
<body>
  <div id="app">
    <ul>
      <li>名字: {{name | formatStr}}</li>
      <li>年龄: {{age}}</li>
    </ul>
  </div>
  
  <script>

    /**
     * 定义一个Vue全局filter
     * filter的两个参数:
     *    1.过滤器名称
     *    2.处理数据的函数,此函数会接受一个参数,就是当前被处理的数据
     * */
    Vue.filter("formatStr",function(value){
      let value1 = value.toUpperCase();
      return value1;
    });

    //步骤2 创建vue实例对象
    let vue = new Vue({
      //步骤3 指定vue对象控制的HTML区域
      el: "#app",
      //步骤4 指定vue对象控制的HTML区域的数据
      data: {
        name: "lchh",
        age: 18,
      },

      //专门用于处理监听事件的回调
      methods: {
        
      },

      // 专门用于定义计算属性
      computed: {
        
      },
    });
  </script>
</body>
</html>

3. 全局过滤器和局部过滤器

3.1 全局过滤器

和new Vue() 平级
不属于任何一个Vue对象
在任何一个平级的Vue对象管理的html区域都能用

3.2 局部过滤器

属于某个Vue实例对象
在Vue实力对象中创建
只能应用于该Vue实力对象管辖的html区域

神奇洋葱头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
12. vue 计算属性和过滤器

1. vue官方计算属性https://cn.vuejs.org/v2/guide/computed.html#计算属性1.1 计算属性示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
复制链接

扫一扫