Vue学习2

1.Vue.js 条件语句

1）条件判断：v-if  v-else

v-if：如前文举例，用于条件判断。但在字符串模板中有所不同：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

v-else，v-else-if：与其它语言中的用法类似。

2）v-show：根据条件显示元素：

<h1 v-show="ok">Hello!</h1>

2.Vue.js 循环语句

使用v-for指令：需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

其中ol标签代表有序html列表，ul代表无需html列表，li为列表项

也可以在模板中使用v-for：

<ul>
  <template v-for="site in sites">
    <li>{{ site.name }}</li>
  </template>
</ul>

v-for迭代对象：通过一个对象的属性来迭代数据。也可以迭代整数。