@polight/lego
Version:
Tiny Web-Components lib for future-proof HTML mentors
33 lines (25 loc) • 721 B
Markdown
title: Custom Directives
weight: 4
A `:` custom directive will interpret in JS whatever you pass as value.
```html
<template>
<a :href="this.getUrl('144')">Visit Profile</a>
</template>
<script>
export default class extends Lego {
getUrl(id) {
return `/user/${id}`
}
}
</script>
```
outputs
```html
<a href="/user/144">Visit Profile</a>
```
[Boolean attributes](https://www.w3.org/TR/html5/infrastructure.html#sec-boolean-attributes)
Example: `<input type=checkbox :checked="state.agreed" :required="state.mustAgree">`.
With the following state: `this.state = { agreed: false, mustAgree: true }` would render
`<input type=checkbox required="required">`.