Vue_qf （6）- 计算属性_qf()计算

作者：人工智能uu | 2024-07-16 11:35:43

踩

qf()计算

1 计算属性

性能比普通方法高

<body>
<div id="app">
   <p>计算属性：{{getName}}</p>

    <p>普通方法：{{getNameMethod()}}</p>
</div>

<script>
    var vm = new Vue({
        el: "#app", // vue 开始渲染的地方
        data: {
            name:"mike Jordan"
        },
        methods: {
            getNameMethod(){
              return   this.name.substr(0,1).toUpperCase() + this.name.substr(1)
            }
        },
        computed:{
            //依赖的状态改变了，计算属性会重新计算一次
            // 就算属性会缓存
            getName(){
                return this.name.substr(0,1).toUpperCase() + this.name.substr(1)
            }
        }
    })

</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

1.1 模糊查询案例

<body>
<div id="app">

    <input type="text" v-model="mytext">
    <ul>
        <li v-for="data in getDatalist">
            {{data}}
        </li>
    </ul>
</div>

<script>
    var vm = new Vue({
        el: "#app", // vue 开始渲染的地方
        data: {
            mytext:"",
            datalist:["amy","bob","candy","danny","Enna"]
        },
        methods: {
        },
        computed:{
            getDatalist(){
                return this.datalist.filter(item =>{
                   return  item.indexOf(this.mytext) > -1
                })
            }
        }
    })

</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/833885