20.04-custom.md

layout	title	label	permalink	nav_order	parent
page	Inserting Custom Attributes in Web-Components	Custom directives	/usage-web-components/custom-directive/	4	Usage

: Custom Directive

A custom directive will interpret in JS whatever you pass as value.

<template>
  <a :href="this.getUrl('144')">Visit Profile</a>
</template>
<script>
  export default class extends Lego {
    getUrl(id) { return `/user/${id}` }
  }
</script>

outputs

<a href="/user/144">Visit Profile</a>

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">.