computed的set方法案例,将地区对象设置为xx-xx-xx格式,{ area: { label: "宝安区", value: "440306" }, city: { label: "深圳市", value: "4403" }, province: { label: "广东省", value: "44" }, }
时间: 2023-07-05 11:31:28 浏览: 137
可以使用`computed`的`set`方法将地区对象设置为`xx-xx-xx`的格式,例如:
```js
new Vue({
data: {
region: {
province: {
label: '广东省',
value: '44'
},
city: {
label: '深圳市',
value: '4403'
},
area: {
label: '宝安区',
value: '440306'
}
}
},
computed: {
regionCode: {
get: function() {
return this.region.province.value + '-' + this.region.city.value + '-' + this.region.area.value;
},
set: function(value) {
var codes = value.split('-');
this.region.province.value = codes[0];
this.region.city.value = codes[1];
this.region.area.value = codes[2];
}
}
}
})
```
上面的代码中,我们定义了一个计算属性`regionCode`,它的`get`方法返回地区对象的`value`拼接而成的字符串,中间以`-`连接。`set`方法将输入的字符串按照`-`分割成三个部分,分别设置到地区对象的`value`属性中。
这样,我们就可以通过`v-model`指令双向绑定`regionCode`,例如:
```html
<input v-model="regionCode" />
```
当我们在输入框中输入一个字符串,例如`"44-4403-440306"`,`set`方法会自动将其分割成省、市、区三个部分的`value`值,并设置到Vue实例的`data`对象中。因此,地区对象的`value`属性也会相应地变为`{ province: { label: '广东省', value: '44' }, city: { label: '深圳市', value: '4403' }, area: { label: '宝安区', value: '440306' } }`。
阅读全文