SOURCE

var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello World!',
    dynamicId: '1',
    someDynamicCondition: true,
    number: 5,
    ok: true,
    id: 9
  }
})

// vm.someDynamicCondition = false

<div id="app">
  <span>Message: {{ msg }}</span>
  <!-- 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定 -->
  <span v-once><br>This will never change: {{ msg }}</span>
  <!-- 双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令 <span v-html="<br /><br />"></span>-->
  <div v-bind:id="dynamicId">123</div>
  <button v-bind:disabled="someDynamicCondition">Button</button>
  <br />{{ number + 1 }}
  <br />{{ ok ? 'YES' : 'NO' }}
  <br />{{ msg.split('').reverse().join('') }}
  <div v-bind:id="'list-' + id">321</div>
  
  <!-- in mustaches -->
  {{ message | capitalize }}
  <!-- in v-bind -->
  <div v-bind:id="rawId | formatId"></div>
</div>