vue---计算属性1--computed（filter、indexOf）---搜索内容过滤demo

最新推荐文章于 2023-12-01 16:57:11 发布

咩有猫腻.

最新推荐文章于 2023-12-01 16:57:11 发布

阅读量675

点赞数

分类专栏：三-框架类 Vue

本文链接：https://blog.csdn.net/DcTbnk/article/details/107205993

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

计算属性

computed计算属性，他有一个特点，可以对数据做缓存。当依赖的数据项没有改变的时候，会读取默认的缓存数据。计算属性会在他所依赖的数据发生改变之后重新计算

应用场景，当多个数据改变之后会影响一个结果的时候进行使用.常见的一个例子就是购物车

...
computed: {
    // 一种写法，有设置值和取值操作的
    chkAll: {
        get() {
            // 表示获取值, 需要return
        },
        set(v) {
            // 表示设置值
        }
    },
    // 另一种写法，获取数据
    sumPrice() {
        // return一个结果
    }
}
...

计算属性 computed：**************************************************
计算属性就是数据依赖项发生改变之后会进行重新的计算
computed计算属性，他有一个特点，可以依赖当前数据改变之后进行重新计算

会用到  filter（） indexOf（）
filter() 方法*****************
          创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
             注意： filter() 不会对空数组进行检测。
             注意： filter() 不会改变原始数组。
             返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
indexOf()********************
          既可用于数组，也可用于字符串。
             indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

             如果没有找到匹配的字符串则返回 - 1。
             indexOf() 方法可返回数组中某个指定的元素位置。

             该方法将从头到尾地检索数组， 看它是否含有对应的元素。 开始检索的位置在数组 start 处或数组的开头（ 没有指定 start 参数时）。 如果找到一个 item， 则返回 item 的第一次出现的位置。 开始位置的索引为 0。

             如果在数组中没找到指定元素则返回 - 1。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>计算属性</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>

<body>
  <!-- 计算属性就是数据依赖项发生改变之后会进行重新的计算 -->
  <div id="app">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">内容过滤</h3>
      </div>
      <div class="panel-body">
        <input type="text" class="form-control" placeholder="请输入关键内容" v-model="key" />

        <ul class="list-group">
          <li class="list-group-item" v-for="(item, index) in filteredList" :key="index">
            {{item}}
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script src="./libs/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        list: ["刘死狗", "泗刘四六", "卡布达", "卡布丁", "筱筱", "啾啾刘啾啾", "咚咚刘"],
        key: "",
      },
      // computed计算属性，**********************
      //  他有一个特点，可以依赖当前数据改变之后进行重新计算
      computed: {
        filteredList() {
          /* filter() 方法*****************
          创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
             注意： filter() 不会对空数组进行检测。
             注意： filter() 不会改变原始数组。
             返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。 */
          /* indexOf()********************
          既可用于数组，也可用于字符串。
             indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

             如果没有找到匹配的字符串则返回 - 1。
             indexOf() 方法可返回数组中某个指定的元素位置。

             该方法将从头到尾地检索数组， 看它是否含有对应的元素。 开始检索的位置在数组 start 处或数组的开头（ 没有指定 start 参数时）。 如果找到一个 item， 则返回 item 的第一次出现的位置。 开始位置的索引为 0。

             如果在数组中没找到指定元素则返回 - 1。 */
          return this.list.filter((item) => item.indexOf(this.key) > -1);
          // return this.list.filter((item) => item.indexOf(this.key) != -1);
        },
      },
    });
  </script>
</body>

</html>

咩有猫腻.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue---计算属性1--computed（filter、indexOf）---搜索内容过滤demo

计算属性 computed：**************************************************计算属性就是数据依赖项发生改变之后会进行重新的计算computed计算属性，他有一个特点，可以依赖当前数据改变之后进行重新计算会用到 filter（） indexOf（）filter() 方法***************** 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意： filter()
复制链接

扫一扫