Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fl3nkey/vue-conditional-attrs
A Vue.js component for conditional rendering attributes and directives.
https://github.com/fl3nkey/vue-conditional-attrs
Last synced: 2 months ago
JSON representation
A Vue.js component for conditional rendering attributes and directives.
- Host: GitHub
- URL: https://github.com/fl3nkey/vue-conditional-attrs
- Owner: FL3NKEY
- License: mit
- Created: 2017-12-08T21:18:29.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-09T15:52:22.000Z (about 7 years ago)
- Last Synced: 2024-11-09T07:09:49.620Z (3 months ago)
- Language: CoffeeScript
- Size: 43 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-conditional-attrs
A Vue.js component for conditional rendering attributes and directives.
## Install
**Via npm** `npm instal vue-conditional-attrs --save`
``` js
import VueConditionalAttrs from 'vue-conditional-attrs';
//OR
var VueConditionalAttrs = require('vue-conditional-attrs');
Vue.use(VueConditionalAttrs);
```
**Via script tag**
``` html
```
## Usage
Once installed you have access to `cn-attrs` component.
``` html
```
### Tag name
Accept tag name or component name.
**Type:** `String`
**Attribute:** `tag`
**Default:** `div`
``` html
```
### Attributes
Accept object of attributes.
**Type:** `Object`
**Attribute:** `attrs`
``` html
```
``` js
//Vue instance
data: function() {
return {
attrs: {
'attribute-name': {
value: /* value */,
if: Boolean
}
}
}
}
//Vue instance
```
OR
``` js
//Vue instance
data: function() {
return {
attrs: {
'attribute-name': Boolean /* or value */
}
}
}
//Vue instance
```
### Directives
Accept object of directives.
**Type:** `Object`
**Attribute:** `directives`
``` html
```
``` js
//Vue instance
data: function() {
return {
directives: {
'directive-name': {
value: /* value */,
if: Boolean
}
}
}
}
//Vue instance
```
OR
``` js
//Vue instance
data: function() {
return {
directives: {
'directive-name': Boolean
}
}
}
//Vue instance
```
### Listeners
Accept object of listeners.
**Type:** `Object`
**Attribute:** `on`
``` html
```
``` js
//Vue instance
data: function() {
return {
listeners: {
'listener-name': { //example: click
event: Function,
if: Boolean
}
}
}
}
//Vue instance
```
OR
``` js
//Vue instance
data: function() {
return {
listeners: {
'listener-name': Function /* or false */
}
}
}
//Vue instance
```