Vue Conditionals and Lists

Example 1

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

    
do you see me?
    
now you see me
    
do you also?
    click me

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

    

      
{{ ingredient }}
    

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的话就需要代码：

{{ ingredient }} ({{ i }})