デモはこちら

● v-if / v-else

<v-btn v-if="isPersistedUser" @click="showUpdate">更新する</v-btn>
<v-btn v-else                 @click="showCreate">追加する</v-btn>

● 変数の表示

<h1>※変数の表示</h1>
<div id="my_template">
<p>変数を出力します : {{ text }}</p>
</div>
<script>
new Vue({
  el  : '#my_template',
  data: {
    text: '日本語の文字です'
  }
});
</script>

● 選択

<h1>※選択</h1>
<div id="my_template_selected">
<select v-model="my_value_selected">
	<option value="">=== 選択してください ===</option>
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
<span v-if="my_value_selected">{{ my_value_selected }}が選択されました。</span>
</div>
<script>
new Vue({
	el      : '#my_template_selected' ,
	data    : {
		my_value_selected: ''
	}
})
</script>

● データのループ

<h1>※データのループ</h1>
<div id="my_template2" v-if="view_flag">
<transition name="fade">
    <ul>
        <li v-for="(item, index) in my_loop">
            {{ index }} - {{ item }}
             <span v-if="index == my_loop.length - 1">last item</span>
        </li>
    </ul>
</transition>
</div>
<script>
new Vue({
  el: '#my_template2',
  data: {
    view_flag: true ,
    my_loop: [
      'ほげほげ',
      'フガフガ',
      'ほげふがほげふが'
    ]
  }
});
</script>

● 指定回数のループ

<h1>※指定回数のループ</h1>
<div id="my_template_loop" v-if="view_flag">
	<div v-for="n in 5" style="border:1px solid black;">
	    {{ n }}
	</div>
</div>
<script>
new Vue({
  el: '#my_template_loop',
  data: {
    view_flag: true ,
  }
});
</script>

● 表示のアニメーション

<h1>※表示のアニメーション</h1>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <h2 v-if="show">こんにちは！ Vue.js</h2>
  </transition>
</div>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0
}
</style>
<script>
new Vue({
  el  : '#demo',
  data: {
    show: false
  }
})
</script>

● 選択による表示の切り替え（リストメニュー選択時に引数を渡す）

<h1>※選択による表示の切り替え（リストメニュー選択時に引数を渡す）</h1>
<div id="my_template_change">
	<select v-model="my_value_selected" v-on:change="my_method(my_value_selected)">
		<option value="">=== 選択してください ===</option>
		<option value="2">2個表示</option>
		<option value="1">1個表示</option>
		<option value="0">表示しない</option>
	</select>
	<span v-if="my_value_selected">{{ my_value_selected }}が選択されました。</span>
    <div v-for="(item, index) in my_loop" style="border: 1px solid black;">
        {{ index+1 }} - {{ item }}
    </div>
</div>
<script>
var v = new Vue({
	el      : '#my_template_change' ,
	data    : {
		my_value_selected: '' ,
	    my_loop: [
	      '宛先01',
	      '宛先02',
	      '宛先03'
	    ]
	} ,
	methods:{
	    my_method: function (arg) {
	    	v.my_loop = [];
	    	for (var i = 0; i < arg; i++) {
				v.my_loop.push('HOGE'+arg)
	    	}
	    }

	}
})
</script>