Example 1

有时候我们希望一些标签的出现和隐藏是动态的根据数据的变化。这个功能需要用到conditionals。
代码如下：不过，这里当show的值变化时，p标签会消失，是完全的消失，不是隐藏或怎样。如果只是想隐藏起来，则应使用 v-show

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
    <p v-if="show">do you see me?</p>
    <p v-else>now you see me</p>
    <p>do you also?</p>
    <button v-on:click="show = !show">click me</button>
</div>

new Vue({
  el: '#app',
  data: {
    show: true
    },
  methods: {
    showAlert: function() {
        alert("Alert");
    },
    store: function(value) {
        this.value = value;
    }
  }
});

这里插播一段html知识，新出的标签叫template。它和Jade等模版比较像，不过是h5自带的。这个博客比较清楚的说明了template。
https://www.html5rocks.com/zh/tutorials/webcomponents/template/

Example 2

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
    <ul>
      <li v-for="ingredient in ingredients">{{ ingredient }}</li>
    </ul>
</div>

new Vue({
  el: '#app',
  data: {
    ingredients:['meat', 'fruit', 'cookies'],
    persons: [
    {name: 'john', age: 17, color: 'red'},
    {name: 'penny', age: 19, color: 'blue'}
    ]
    },
  methods: {
  }
});

对于list中的每个ingredient，如果想不仅显示其值，还要显示index的话就需要代码：
<li v-for="(ingredient, i) in ingredients">{{ ingredient }} ({{ i }})</li>