Skip to content

Commit 027da9c

Browse files
committed
Merge pull request #74 from azamat-sharapov/directives-doc
'Multiple clauses' section in 'Custom directives' doc
2 parents d9d5069 + 93ee108 commit 027da9c

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

source/guide/custom-directive.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,26 @@ var demo = new Vue({
111111
})
112112
</script>
113113

114+
### Multiple Clauses
115+
116+
Comma separated arguments are bound as multiple directive instances. In the following example, directive methods are called twice:
117+
118+
``` html
119+
<div v-demo="color: 'white', text: 'hello!'"></div>
120+
```
121+
122+
You can achieve single binding with all arguments by closing value with object literal:
123+
124+
``` html
125+
<div v-demo="{color: 'white', text: 'hello!'}"></div>
126+
```
127+
128+
``` js
129+
Vue.directive('demo', function (value) {
130+
console.log(value) // Object {color: 'white', text: 'hello!'}
131+
})
132+
```
133+
114134
## Literal Directives
115135

116136
If you pass in `isLiteral: true` when creating a custom directive, the attribute value will be taken as a literal string and assigned as that directive's `expression`. The directive will not attempt to setup data observation.

0 commit comments

Comments
 (0)