vue中 computed的使用场景

1、如果显示和方法中使用的时候类型切换_这里的type初始化的时候是数组['语文', '数学', '英语'],但是input中双向绑定只支持数字和字符串基本数据类型,所以这里就需要在数组和字符串直接切换_

...
<template>
    <div>
        <input type="text" v-model="computedType" />
    </div>
</template>
...

data () {
    return {
        type: ['语文', '数学', '英语']
    }
},
computed: {
    // 他可以缓存数据,当依赖的数据发生变化时才重新计算。
    computedType: {
      get () {
        return this.type.join(',') // 字符串
      },
      set (val) {
        this.type = val.split(',') // 数组
      }
    }
    ...

2、computed是可以缓存数据的,当相关的变量发生变化的时候才重新计算在搜索栏中可以使用,输入就搜索,不需要单机搜索按钮的情况,返回搜索结果

<template>
    <div>
        <input type="text" v-model="search" />
        <div>
            {{searchList}}
        </div>
    </div>
</tempalte>
...
data () {
    return {
        search: ''
    }
    ...
    computed: {
        searchList: {
            get () {
                return ['name': 'vaue']
            },
            set (val) {
                // 根据输入内容 val调接口查询,返回数据列表
                return [{'name': 'zxc'}, {name: 'hh']
            }
        }
    }
原文链接:segmentfault.com

上一篇:Vue 改变数据,页面不刷新的问题
下一篇:css overflow-scroll-with-padding (Webkit VS Firefox)

相关推荐

官方社区

扫码加入 JavaScript 社区