#
Regular [](../reference/expression.md#setable) ____ ____
## {#computed}
[options](../reference/api.md#options) `computed` [](../reference/expression.md)
###
__[](../reference/expression.md#setable)__
__`get``set`()__
- `get(data)`: getter ____
- data: `data` component.data
- this: `this` component
- `set(value, data)`: setter ____
- value: the value to set
- data: `data` component.data
- this: `this` component
_set_
```js
const Component = Regular.extend({
computed: {
fullname: {
get: function(data){
return data.first + "-" + data.last;
},
set: function(value, data){
var tmp = value.split("-");
data.first = tmp[0];
data.last = tmp[1];
}
}
}
})
```
__getter__
```javascript
const Component = Regular.extend({
computed: {
fullname: function(data){
return data.first + "-" + data.last;
}
}
})
```
```javascript
const Component = Regular.extend({
computed: {
fullname: `first+ '-' + last`
}
})
```
```javascript
const Component = Regular.extend({
template: `
fullname:
first:
last:
{welcome}
`,
computed: {
welcome: `'Hello, '+ fullname`,
fullname: {
get: function(data) {
return data.first + "-" + data.last;
},
set: function(value, data) {
const tmp = value.split("-");
data.first = tmp[0];
data.last = tmp[1]||'';
}
}
}
})
const component = new Component({
data: {
first: '1',
last: '2'
}
}).$inject(document.body);
```
____
- `welcome`:
- `fullname`: set
###
javascript IE`Object.defineProperty` Regular -- [$get](../reference/api.md#get)
```js
const Component = Regular.extend({
computed:{
fullname: `first + '-' + last`
}
})
const component = new Component({
data: {
first: 'Zheng'
last: 'Haibo'
}
});
console.log(component.data.fullname) // undefined
console.log(component.$get('fullname')) // 'Zheng-Haibo'
```
`$get`
```js
component.$get('"Hello, " + fullname')
```
____
- [$get](../reference/api.md#)
### : /
```java
const ListComponent = Regular.extend({
computed: {
selectAll: {
// only every item is selected, we return true
get: function( data ){
if(!data.list) return false;
return data.list.filter(
function(item){ return !!item.selected}
).length === data.list.length;
},
set: function( value, data ){
if(!data.list) return
// set every item.selected with passed value
data.list.forEach(function(item){
item.selected = value;
})
}
}
}
})
```
__template__
```html
Select All
```
## - filter
Regular [](../reference/expression.md#filter) , `+``-`
__Syntax__
`Expression| fitlerName: arg1, arg2,... argN `
__Example__
```html
{list| join: '+'}
```
###
[`Regular.filter`](../reference/api.md#filter)
joinsplit
```javascript
Regular.filter({
'join': function( list, split ){
return list.join(split||'-')
}
})
new Regular({
template:`
{list|join:'+'}
`,
data: {
list: ['Add', 'Update', 'Delete']
}
})
```
###
get [set](#two-way)
```js
Reuglar.extend({
template:`
{list|join:'+'}
`
})
```
###
( `a?b:c` )`()`
```html
{ 'add: ' + ([1,2,3]|join: '+') } = 6
```
____
```html
add: 1+2+3 = 6
```
### : format
Regular
__Example__
```javascript
// simplest date format
function fix(str) {
str = "" + (str || "");
return str.length '1-2-3'
get: function(origin, split ){
return origin.join( split || "-" );
},
// **Important **
// '1-2-3' - > ["1","2","3"]
set: function(dest, split ){
return dest.split( split || "-" );
}
})
```
> : `get`
```html
{JSON.stringify(array)}
```
____
- ____: `input.value` `array` __set__ __ > __
- ____: `array``input.value` __get__ __ > __
> [](../reference/expression.md), `JSON`
###
-
-
###
Regular __format!__ [moment.js](https://momentjs.com/)
- `json`: __
- get: `JSON.parse`
- set: `JSON.stringify`
- `last`
- get: `list[list.length-1]`