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>
