<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Template Syntax — Sanskrit Notes संस्कृत टिप्पणी</title>
        <meta charset="utf-8">
        <meta name="description" content="Sanskrit Notes संस्कृत टिप्पणी - A easy modern introduction to the ancient language.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="Template Syntax — Vue.js">
        <meta property="og:description" content="Sanskrit Notes संस्कृत टिप्पणी - A easy modern introduction to the ancient language.">
        <meta property="og:image" content="https://sanskritnotes.com//images/logo.png">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="Template Syntax — Vue.js">
        <meta name="twitter:description" content="Sanskrit Notes संस्कृत टिप्पणी - A easy modern introduction to the ancient language.">
        <meta name="twitter:image" content="https://sanskritnotes.com/images/logo.png">

        <link rel="icon" href="/images/logo.png" type="image/x-icon">

        <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>
        <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'>

        <!-- main page styles -->
        <link rel="stylesheet" href="/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/js/vue.js"></script>
        <script>window.PAGE_TYPE = "guide"</script>

        <!-- ga -->
        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', '', 'sanskritnotes.com');
          ga('send', 'pageview');
        </script>
    </head>
    <body class="docs">        <div id="mobile-bar" >
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        <div id="header">
  <a id="logo" href="/">
    <img src="/images/sanskritnotes_logo.png">
    <span>Sanskrit Notes संस्कृत टिप्पणी</span>
  </a>
  <ul id="nav">
    <li>
  <form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>
</li>
<!-- <li><a href="/v2/guide/" class="nav-link current">Guide</a></li> -->
<li><a href="/v2/api/" class="nav-link">Notes</a></li>
<!-- <li><a href="/v2/examples/" class="nav-link">Examples</a></li> -->
<!-- <li class="nav-dropdown-container ecosystem">
  <a class="nav-link">Ecosystem</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>Help</h4></li>
    <li><ul>
      <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
      <li><a href="https://github.com/vuejs-templates" class="nav-link" target="_blank">Templates</a></li>
    </ul></li>
    <li><h4>News</h4></li>
    <li><ul>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">Blog</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">Jobs</a></li>
    </ul></li>
    <li><h4>Core Plugins</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
    </ul></li>
    <li><h4>Resource Lists</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">Official Repos</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Awesome Vue</a></li>
    </ul></li>
  </ul>
</li>


 -->
<!-- <li class="nav-dropdown-container language">
  <a class="nav-link">Translations</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://cn.vuejs.org/" class="nav-link" target="_blank">中文</a></li>
    <li><a href="https://jp.vuejs.org/" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/" class="nav-link" target="_blank">Português</a></li>
  </ul>
</li>
 -->
<!-- <li>
  <a href="https://vue.threadless.com" target="_blank" class="nav-link shop">Shop</a>
  <span class="new-label">NEW!</span>
</li> -->

  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li>
  <form id="search-form">
    <input type="text" id="search-query-sidebar" class="search-query st-default-search-input">
  </form>
</li>
<!-- <li><a href="/v2/guide/" class="nav-link current">Guide</a></li> -->
<li><a href="/v2/api/" class="nav-link">Notes</a></li>
<!-- <li><a href="/v2/examples/" class="nav-link">Examples</a></li> -->
<!-- <li class="nav-dropdown-container ecosystem">
  <a class="nav-link">Ecosystem</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>Help</h4></li>
    <li><ul>
      <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
      <li><a href="https://github.com/vuejs-templates" class="nav-link" target="_blank">Templates</a></li>
    </ul></li>
    <li><h4>News</h4></li>
    <li><ul>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">Blog</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">Jobs</a></li>
    </ul></li>
    <li><h4>Core Plugins</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
    </ul></li>
    <li><h4>Resource Lists</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">Official Repos</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Awesome Vue</a></li>
    </ul></li>
  </ul>
</li>


 -->
<!-- <li class="nav-dropdown-container language">
  <a class="nav-link">Translations</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://cn.vuejs.org/" class="nav-link" target="_blank">中文</a></li>
    <li><a href="https://jp.vuejs.org/" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/" class="nav-link" target="_blank">Português</a></li>
  </ul>
</li>
 -->
<!-- <li>
  <a href="https://vue.threadless.com" target="_blank" class="nav-link shop">Shop</a>
  <span class="new-label">NEW!</span>
</li> -->

    </ul>
    <div class="list">
        <div class="main-sponsor">
            <!-- <span>Platinum Sponsor</span><br>
            <a href="https://stdlib.com" target="_blank" class="logo">
                <img src="/images/stdlib.png">
            </a> -->
        </div>
        <!-- <a class="become-backer" href="/support-vuejs">
            Become a Sponsor
        </a> -->
        <h2>
            <!-- Guide
            
                <select class="version-select">
                    <option value="SELF" selected>2.0</option>
                    <option value="v1">1.0</option>
                    <option value="012">0.12</option>
                    <option value="011">0.11</option>
                </select>
             -->
        </h2>
        <ul class="menu-root">
            
                
                
                    
                      <li><h3>Essentials</h3></li>
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/installation.html" class="sidebar-link">Installation</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/index.html" class="sidebar-link">Introduction</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/instance.html" class="sidebar-link">The Vue Instance</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/syntax.html" class="sidebar-link current">Template Syntax</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/computed.html" class="sidebar-link">Computed Properties and Watchers</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/class-and-style.html" class="sidebar-link">Class and Style Bindings</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/conditional.html" class="sidebar-link">Conditional Rendering</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/list.html" class="sidebar-link">List Rendering</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/events.html" class="sidebar-link">Event Handling</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/forms.html" class="sidebar-link">Form Input Bindings</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/components.html" class="sidebar-link">Components</a>
                </li>
            
                
                
                    
                    
                      <li><h3>Advanced</h3></li>
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/reactivity.html" class="sidebar-link">Reactivity in Depth</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/transitions.html" class="sidebar-link">Transition Effects</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/transitioning-state.html" class="sidebar-link">Transitioning State</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/render-function.html" class="sidebar-link">Render Functions</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/custom-directive.html" class="sidebar-link">Custom Directives</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/mixins.html" class="sidebar-link">Mixins</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/plugins.html" class="sidebar-link">Plugins</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/single-file-components.html" class="sidebar-link">Single File Components</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/deployment.html" class="sidebar-link">Production Deployment Tips</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/routing.html" class="sidebar-link">Routing</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/state-management.html" class="sidebar-link">State Management</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/unit-testing.html" class="sidebar-link">Unit Testing</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/ssr.html" class="sidebar-link">Server-Side Rendering</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/typescript.html" class="sidebar-link">TypeScript Support</a>
                </li>
            
                
                
                    
                    
                    
                      <li><h3>Migrating</h3></li>
                    
                    
                
                
                <li>
                    <a href="/v2/guide/migration.html" class="sidebar-link">Migration from Vue 1.x</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/migration-vue-router.html" class="sidebar-link">Migration from Vue Router 0.7.x</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/migration-vuex.html" class="sidebar-link">Migration from Vuex 0.6.x to 1.0</a>
                </li>
            
                
                
                    
                    
                    
                    
                      <li><h3>Meta</h3></li>
                    
                
                
                <li>
                    <a href="/v2/guide/comparison.html" class="sidebar-link">Comparison with Other Frameworks</a>
                </li>
            
                
                
                    
                    
                    
                    
                
                
                <li>
                    <a href="/v2/guide/join.html" class="sidebar-link">Join the Vue.js Community!</a>
                </li>
            
            
        </ul>
    </div>
</div>


<div class="content guide with-sidebar syntax-guide">
    
      <div id="ad">
  <!-- <span>Sponsored By</span><br>
  <a href="http://www.thedifferenceengine.io/" target="_blank"
    style="background-color: rgba(0,0,0,.85); padding: 10px 0">
    <img src="/images/tde.png">
  </a> -->
  <!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script> -->
</div>

    
    
      <h1>Template Syntax</h1>
    
    <p>Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.</p>
<p>Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.</p>
<p>If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also <a href="render-function.html">directly write render functions</a> instead of templates, with optional JSX support.</p>
<h2 id="Interpolations"><a href="#Interpolations" class="headerlink" title="Interpolations"></a>Interpolations</h2><h3 id="Text"><a href="#Text" class="headerlink" title="Text"></a>Text</h3><p>The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>Message: &#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div></pre></td></tr></table></figure>
<p>The mustache tag will be replaced with the value of the <code>msg</code> property on the corresponding data object. It will also be updated whenever the data object's <code>msg</code> property changes.</p>
<p>You can also perform one-time interpolations that do not update on data change by using the <a href="../api/#v-once">v-once directive</a>, but keep in mind this will also affect any binding on the same node:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-once</span>&gt;</span>This will never change: &#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="Raw-HTML"><a href="#Raw-HTML" class="headerlink" title="Raw HTML"></a>Raw HTML</h3><p>The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the <code>v-html</code> directive:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">"rawHtml"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>The contents are inserted as plain HTML - data bindings are ignored. Note that you cannot use <code>v-html</code> to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.</p>
<p class="tip">Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank" rel="external">XSS vulnerabilities</a>. Only use HTML interpolation on trusted content and <strong>never</strong> on user-provided content.</p>

<h3 id="Attributes"><a href="#Attributes" class="headerlink" title="Attributes"></a>Attributes</h3><p>Mustaches cannot be used inside HTML attributes, instead use a <a href="../api/#v-bind">v-bind directive</a>:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:id</span>=<span class="string">"dynamicId"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>It also works for boolean attributes - the attribute will be removed if the condition evaluates to a falsy value:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-bind:disabled</span>=<span class="string">"someDynamicCondition"</span>&gt;</span>Button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="Using-JavaScript-Expressions"><a href="#Using-JavaScript-Expressions" class="headerlink" title="Using JavaScript Expressions"></a>Using JavaScript Expressions</h3><p>So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; number + 1 &#125;&#125;</div><div class="line"></div><div class="line">&#123;&#123; ok ? 'YES' : 'NO' &#125;&#125;</div><div class="line"></div><div class="line">&#123;&#123; message.split('').reverse().join('') &#125;&#125;</div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:id</span>=<span class="string">"'list-' + id"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain <strong>one single expression</strong>, so the following will <strong>NOT</strong> work:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- this is a statement, not an expression: --&gt;</span></div><div class="line">&#123;&#123; var a = 1 &#125;&#125;</div><div class="line"></div><div class="line"><span class="comment">&lt;!-- flow control won't work either, use ternary expressions --&gt;</span></div><div class="line">&#123;&#123; if (ok) &#123; return message &#125; &#125;&#125;</div></pre></td></tr></table></figure>
<p class="tip">Template expressions are sandboxed and only have access to a whitelist of globals such as <code>Math</code> and <code>Date</code>. You should not attempt to access user defined globals in template expressions.</p>

<h2 id="Directives"><a href="#Directives" class="headerlink" title="Directives"></a>Directives</h2><p>Directives are special attributes with the <code>v-</code> prefix. Directive attribute values are expected to be <strong>a single JavaScript expression</strong> (with the exception for <code>v-for</code>, which will be discussed later). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes. Let's review the example we saw in the introduction:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"seen"</span>&gt;</span>Now you see me<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Here, the <code>v-if</code> directive would remove/insert the <code>&lt;p&gt;</code> element based on the truthiness of the value of the expression <code>seen</code>.</p>
<h3 id="Arguments"><a href="#Arguments" class="headerlink" title="Arguments"></a>Arguments</h3><p>Some directives can take an "argument", denoted by a colon after the directive name. For example, the <code>v-bind</code> directive is used to reactively update an HTML attribute:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">"url"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Here <code>href</code> is the argument, which tells the <code>v-bind</code> directive to bind the element's <code>href</code> attribute to the value of the expression <code>url</code>.</p>
<p>Another example is the <code>v-on</code> directive, which listens to DOM events:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-on:click</span>=<span class="string">"doSomething"</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Here the argument is the event name to listen to. We will talk about event handling in more detail too.</p>
<h3 id="Modifiers"><a href="#Modifiers" class="headerlink" title="Modifiers"></a>Modifiers</h3><p>Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the <code>.prevent</code> modifier tells the <code>v-on</code> directive to call <code>event.preventDefault()</code> on the triggered event:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">v-on:submit.prevent</span>=<span class="string">"onSubmit"</span>&gt;</span><span class="tag">&lt;/<span class="name">form</span>&gt;</span></div></pre></td></tr></table></figure>
<p>We will see more use of modifiers later when we take a more thorough look at <code>v-on</code> and <code>v-model</code>.</p>
<h2 id="Filters"><a href="#Filters" class="headerlink" title="Filters"></a>Filters</h2><p>Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: <strong>mustache interpolations and <code>v-bind</code> expressions</strong>. Filters should be appended to the end of the JavaScript expression, denoted by the "pipe" symbol:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- in mustaches --&gt;</span></div><div class="line">&#123;&#123; message | capitalize &#125;&#125;</div><div class="line"></div><div class="line"><span class="comment">&lt;!-- in v-bind --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:id</span>=<span class="string">"rawId | formatId"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p class="tip">Vue 2.x filters can only be used inside mustache interpolations and <code>v-bind</code> expressions (the latter supported since 2.1.0), because filters are primarily designed for text transformation purposes. For more complex data transforms in other directives, you should use <a href="computed.html">Computed properties</a> instead.</p>

<p>The filter function always receives the expression's value as the first argument.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  <span class="comment">// ...</span></div><div class="line">  filters: &#123;</div><div class="line">    <span class="attr">capitalize</span>: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</div><div class="line">      <span class="keyword">if</span> (!value) <span class="keyword">return</span> <span class="string">''</span></div><div class="line">      value = value.toString()</div><div class="line">      <span class="keyword">return</span> value.charAt(<span class="number">0</span>).toUpperCase() + value.slice(<span class="number">1</span>)</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>Filters can be chained:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; message | filterA | filterB &#125;&#125;</div></pre></td></tr></table></figure>
<p>Filters are JavaScript functions, therefore they can take arguments:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; message | filterA('arg1', arg2) &#125;&#125;</div></pre></td></tr></table></figure>
<p>Here, the plain string <code>&#39;arg1&#39;</code> will be passed into the filter as the second argument, and the value of expression <code>arg2</code> will be evaluated and passed in as the third argument.</p>
<h2 id="Shorthands"><a href="#Shorthands" class="headerlink" title="Shorthands"></a>Shorthands</h2><p>The <code>v-</code> prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the <code>v-</code> prefix becomes less important when you are building an <a href="https://en.wikipedia.org/wiki/Single-page_application" target="_blank" rel="external">SPA</a> where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, <code>v-bind</code> and <code>v-on</code>:</p>
<h3 id="v-bind-Shorthand"><a href="#v-bind-Shorthand" class="headerlink" title="v-bind Shorthand"></a><code>v-bind</code> Shorthand</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- full syntax --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">"url"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- shorthand --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">:href</span>=<span class="string">"url"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="v-on-Shorthand"><a href="#v-on-Shorthand" class="headerlink" title="v-on Shorthand"></a><code>v-on</code> Shorthand</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- full syntax --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-on:click</span>=<span class="string">"doSomething"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- shorthand --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">a</span> @<span class="attr">click</span>=<span class="string">"doSomething"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></div></pre></td></tr></table></figure>
<p>They may look a bit different from normal HTML, but <code>:</code> and <code>@</code> are valid chars for attribute names and all Vue.js supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.</p>

    
      <div class="guide-links">
        
          <span>← <a href="/v2/guide/instance.html">The Vue Instance</a></span>
        
        
          <span style="float:right"><a href="/v2/guide/computed.html">Computed Properties and Watchers</a> →</span>
        
      </div>
    
    <div class="footer">
      Caught a mistake or want to contribute to the documentation?
      <a href="https://github.com/vuejs/vuejs.org/blob/master/src/v2/guide/syntax.md" target="_blank">
        Edit this page on Github!
      </a>
    </div>
</div>

                
            </div>
            <script src="/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->
        <script src="/js/css.escape.js"></script>
        <script src="/js/common.js"></script>

        <!-- search -->
        <link href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="/css/search.css">
        <script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
        <script>
        [
          '#search-query-nav',
          '#search-query-sidebar'
        ].forEach(function (selector) {
          if (!document.querySelector(selector)) return
          // search index defaults to v2
          var match = window.location.pathname.match(/^\/(v\d+)/)
          var version = match ? match[1] : 'v2'
          docsearch({
            appId: 'BH4D9OD16A',
            apiKey: '85cc3221c9f23bfbaa4e3913dd7625ea',
            indexName: 'vuejs',
            inputSelector: selector,
            algoliaOptions: { facetFilters: ["version:" + version] }
          })
        })
        </script>

        <!-- fastclick -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body)
        }, false)
        </script>
    </body>
</html>
