Skip to content

Instantly share code, notes, and snippets.

@mavame
Created July 31, 2017 14:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mavame/1c1f4acdd32ab760f900c745b3d0b662 to your computer and use it in GitHub Desktop.
Save mavame/1c1f4acdd32ab760f900c745b3d0b662 to your computer and use it in GitHub Desktop.
Learning Vue

Learning Vue

Conditional Rendering

<div id="container" v-if="someJSexpression"></div>

If someJSExpression evaluates to true, the div will appear in the DOM. Otherwise, it's left out.

Data Binding

<div id="container" v-if="someJSexpression"></div>

If someJSExpression changes in Javascript, the div display will be automatically updated.

Classes and other attributes

<div id="container" v-bind:class="someJSexpression"></div>
<div id="container" v-bind:aria-expanded="someJSexpression"></div>

Shorthand

<div id="container" :class="someJSexpression"></div>
<div id="container" :aria-expanded="someJSexpression"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment