1、如果显示和方法中使用的时候类型切换
<input v-model="type" />这里的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']
}
}
}