Vue---计算属性---利用计算属性进行模糊查询

最新推荐文章于 2023-01-08 12:08:55 发布

一个平平无奇的小高

最新推荐文章于 2023-01-08 12:08:55 发布

阅读量569

点赞数 1

分类专栏： Vue 文章标签： vue javascript vue.js css3 html5

本文链接：https://blog.csdn.net/qq_44646343/article/details/108907691

版权

Vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

输出是最好的学习，所以，我又来记笔记啦。。。。
Vue

计算属性：如果我们把过多的逻辑写在模板中的话，太难维护，当模板中的数据需要比较复杂的计算时，我们可以采用这个computed属性进行计算。

计算属性 VS methods:
1、计算属性是基于它们的依赖进行缓存的
2、计算属性只有在它的相关依赖发生变化时才会重新求值
3、computed属性和methods在某种程度上可以完成相同的事情，但是计算属性具有缓存作用，而methods方法则不同，每当页面渲染的时候，methods中的方法会重新执行

【例1】
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue计算属性</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <div id="box">
        <p>计算属性：{{getName}}</p>
        <p>计算方法：{{getNameMethods()}}</p>
        这里也需要调用计算属性：
        <p>计算属性：{{getName}}</p>
        <p>计算方法：{{getNameMethods()}}</p>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#box",
        data: {
            myName: "xiaoming"
        },
        methods: {
            getNameMethods() {
                console.log("计算方法调用")
                return this.myName.substring(0, 1).toUpperCase() + this.myName.substring(1)
            }
        },
        computed: {
            getName() {
                console.log("计算属性调用")
                return this.myName.substring(0, 1).toUpperCase() + this.myName.substring(1)
            }
        }
    })
</script>
</html>

在控制台操作一下：

在这里插入图片描述
首先，我们可以发现，计算属性只执行了一次（计算属性会缓存），而方法你调用几次就执行几次，所以这个性能问题就突显出来了，明显计算属性的性能更好一点。其次，属性和方法的调用也有区别，方法在调用时有小括号getNameMethods()，而计算属性getName调用没有小括号。而且，我们发现当依赖的状态改变时，计算属性会重新计算一遍，myName的值从Xiaoming变成了Gladiola.

【例2】 利用计算属性进行模糊查询
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-列表过滤</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="mytext">  
        <ul>
            <li v-for="data in getData">
                {{data}}
            </li>
        </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#box",
        data:{
            mytext:'',
            datalist:["aaa", "aac", "bab", "ccc", "bbc", "dda", "aczc", "bas"]
        },
        computed:{
            getData(){
                return this.datalist.filter(item=>item.indexOf(this.mytext) > -1)  
                //🐖：indexOf的意思是判断一个字符或者字符串在不在另外一个字符串中，如果在，返回大于等于0的数字，若不在，返回小于0的数字，eg:"aank".indexOf('aa')返回0；"aank".indexOf('e')返回-1
            }
        }
    })
</script>
</html>

运行结果：
计算属性

一个平平无奇的小高

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue---计算属性---利用计算属性进行模糊查询

输出是最好的学习，所以，我又来记笔记啦。。。。计算属性：如果我们把过多的逻辑写在模板中的话，太难维护，当模板中的数据需要比较复杂的计算时，我们可以采用这个computed属性进行计算。计算属性 VS methods:1、计算属性是基于它们的依赖进行缓存的2、计算属性只有在它的相关依赖发生变化时才会重新求值3、computed属性和methods在某种程度上可以完成相同的事情，但是计算属性具有缓存作用，而methods方法则不同，每当页面渲染的时候，methods中的方法会重新执行【例1】代码
复制链接

扫一扫

专栏目录