Display Directives

Directives that manage how your HTML is rendered

Display directives can generally be attached to any element, and can acess data from the component they are related to. Some directives (e.g. v-disabled, v-href) may only be valid on certain types of elements.

The v-if directive is used to control whether an element is rendered in the DOM. If the expression evaluates to true, we attach the element to the DOM, otherwise we remove it, but save it's location with an HTML comment.

For convenience, v-if automatically removes the hidden attribute from the element when the directive is parsed. This allows you to hide conditionally rendered elements until Vivere has finished parsing.

The v-if directive also prevents any directives attached to its ancestors from rendering. This is helpful for example if you only want to render content if an object exists, and want to freely reference properties of that object (e.g. in a v-text directive) without having to worry about null checks.

<div
  v-component
  v-data:show-message="false"
>
  <button v-event:click="showMessage = !showMessage">
    Toggle Message
  </button>
  <p v-if="showMessage">
    This is a secret, hidden message!
  </p>
</div>

// No javascript required!

The v-else-if directive works just like the v-if directive, but evaluates only if an immediately preceding v-if or v-else-if directive evalutes false first, and its expression evalutes to be true.

<div
  v-component
  v-data:show-message="false"
>
  <button v-event:click="showMessage = !showMessage">
    Toggle Message
  </button>
  <p v-if="showMessage">
    This is a secret, hidden message!
  </p>
</div>

// No javascript required!

The v-else directive renders content like a v-if, but ONLY if an immediately preceding v-if or v-else-f directive evaluates false first.

<div
  v-component
  v-data:show-message="false"
>
  <button v-event:click="showMessage = !showMessage">
    Toggle Message
  </button>
  <p v-if="showMessage">
    This is a secret, hidden message!
  </p>
</div>

// No javascript required!

The v-show directive works very similarly to v-if, but toggles the hidden attribute of the element instead of removing the element from DOM. You can choose which directive to use based on whether you require the element to remain within the DOM or not.

<div
  v-component
  v-data:show-message="false"
>
  <button v-event:click="showMessage = !showMessage">
    Toggle Message
  </button>
  <p v-show="showMessage">
    This is a secret, hidden message!
  </p>
</div>

// No javascript required!

The v-disabled directive conditionally adds the disabled attribute to an element. The disabled attribute is added if the expression evaluates to true, and removes it if it evaluates to false.

<div
  v-component
  v-data:disabled="false"
>
  <button v-event:click="disabled = !disabled">Toggle Disabled</button>
  <button v-disabled="disabled">Another Button</button>
</div>

// No javascript required

The v-href directive controls the href attribute on an element. If the expression returns null, the href attribute is removed, otherwise it is interpreted as a string used as the href attribute.

<div v-component="v-href">
  <button
    v-event:click="toggleLink"
  >Toggle Link</button>
  <a
    v-href="href"
    v-text="label"
  ></a>
</div>

class VHref extends VivereComponent {
  href = null;
  label = null;

  toggleLink() {
    if (this.href == null) {
      this.href = 'https://www.google.com';
      this.label = "A link to Google..."
    } else {
      this.href = null;
      this.label = "A broken link...";
    }
  }
}
Vivere.register('VHref', VHref);

The v-class directive adds or removes one or more classes to the element. It can operate in two ways, either by passing a class (or classes) to the directive to add or remove based on a boolean expression, or by passing an expression that will evaluate as a list of classes.

Boolean Expression

When we included a class (or classes) in our directive, the expression will be interepreted as a boolean expression. If the expression is evaluated as true, we add the class(es), and if it evaluates as false we remove the class(es). You can use multiple v-class directives to toggle multiple classes with differing logic.

<div
  v-component
  v-data:blue="true"
>
  <button v-event:click="blue = !blue">Toggle Classes</button>
  <p
    v-class:text-blue.italic="blue"
    v-class:text-red="!blue"
  >This is a blue message...</p>
</div>

// No javascript required

Class List Expression

For more complicated logic, or personal preference, we can also point the v-class directive to an array of classes we want to turn on. Any classes previously added by this v-class directive will be removed and any new classes passed are added.

<div
  v-component="v-class"
  class="flex items-center space-x-4"
>
  <button
    v-event:click="blue = !blue"
    class="button"
  >Toggle Classes</button>
  <p v-class="textClasses">This is a blue message...</p>
</div>

export default class VClass {
  blue = true;

  get textClasses() {
    const { blue } = this;

    if (blue) return ['text-blue', 'italic'];
    return ['text-red'];
  }
}
Vivere.register('VClass', VClass);

The v-style directive automatically updates a style attribute for the element involved. The name property controls which attribute we update. The expression is evaluated as a string and passed in as a value for the style.

<div v-component="v-style">
  <div v-style:width="widthPerc">
  </div>
</div>

class VStyle extends VivereComponent {
  // Data
  width = 0;
  interval = null;

  // Computed
  get widthPerc() {
    const { width } = this;
    return `${width}%`;
  }

  // Lifecycle Callbacks
  connected() {
    const binding =
      this.incrementWidth.bind(this);

    this.interval =
      setInterval(binding, 100);
  }

  destroyed() {
    cancelInterval(this.interval);
  }

  // Methods
  incrementWidth() {
    this.width += 1;
    if (this.width > 100)
      this.width = 0;
  }
};
Vivere.register('VStyle', VStyle);

The v-text directive sets the text property of your element. It's useful for any dynamic text derived from component data that we cannot rely on the server to generate.

<div
  v-component
  v-data:text="something"
  v-data:toggle="false"
>
  <p>I
    <span v-text="toggle ? 'hate' : 'love'" ></span>
    <span v-text="text"></span>.
  </p>
  <input
    type="text"
    v-sync="text"
  >
  <button
    v-event:click="toggle = !toggle"
  >Toggle Feelings</button>
</div>

// No Javascript required...

The v-html directive sets the innerHTML property of your element. It does not do any escpaing or safety checks, so be careful!

The v-attr directive sets the value of any generic attribute of an element. If you pass in null, the attribute will be removed; otherwise it will be set to whatever the expression evaluates to.

The v-src directive sets the src property of an img. If you pass in null it will set the src to a blank string, otherwise it will be set to whatever the expression evaluates to.