vue3计算属性

计算属性的用法：

<template>
    <div>
        <input type="text" v-model="obj.mytext">
        <ul>
            <li v-for="data in computedList" :key="data">
                {{data}}
            </li>
        </ul>
        {{computedList}}
    </div>
</template>
<script>
//导入计算属性
import { reactive,computed } from '@vue/reactivity'
export default {
    setup(){
        const obj=reactive({
            mytext:'',
            datalist:["aaa","abb","abc","bcc","add","bcd"]
        })
        //计算属性
        const computedList = computed(()=>{
            return obj.datalist.filter(item=>item.includes(obj.mytext))
        })
        return{
            obj,
            computedList
        }
    }
}
</script>

要导入计算属性：

import { computed } from '@vue/reactivity'

定义计算属性：

• 计算属性的参数是回调函数
• computed（回调函数）

const computedList = computed(()=>{
            return obj.datalist.filter(item=>item.includes(obj.mytext))
        })

使用计算函数：

<ul>
   <li v-for="data in computedList" :key="data">
         {{data}}
   </li>
</ul>

结果：

 

函数的用法：

<template>
    <div>
        <input type="text" v-model="obj.mytext">
        <ul>
            <li v-for="data in filterlist()" :key="data">
                {{data}}
            </li>
        </ul>
        {{filterlist()}}
    </div>
</template>
<script>
import { reactive } from '@vue/reactivity'
export default {
    setup(){
        const obj=reactive({
            mytext:'',
            datalist:["aaa","abb","abc","bcc","add","bcd"]
        })

        //函数用法
        const filterlist=()=>{
             return obj.datalist.filter(item=>item.includes('obj.mytext'))
         }
        
        return{
            obj,
            filterlist
        }
    }
}
</script>

函数用法和计算属性的区别可以看：

计算属性computed、过滤器定义Vue.filter()_陌一一的博客-CSDN博客