Vue.js 学习日志——条件与循环（三）

Vue.js 条件与循环

• 条件

1. v-if 指令
2. v-else-if 指令
3. v-else 指令

示例：

<div id="div">
  <input type="number" v-model="number">
  <div v-if="number > 5">大于5</div>
  <div v-else-if="number == 5">等于5</div>
  <div v-else>小于5</div>
</div>

<script type="text/javascript">
  new Vue({
    el:"#div",
    data:{number:5}
  });
</script>

---

• 循环

循环使用v-for指令，需要以site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

绑定数据到数组：

<div id="booklist">
  <ol>
    <li v-for="book in books">
      {{ book.name }}
    </li>
  </ol>
</div>

<script>
  new Vue({
    el:"#booklist",
    data:{
      books:[
        {name:"语文书"},
        {name:"数学书"},
        {name:"英文书"}
      ]
    }
  });
</script>

迭代对象

通过一个对象的属性进行迭代数据：

<div id="book">
  <ul>
    <li v-for="value in books">
      {{ value }}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el:"#book",
    data:{
      books:{
        chinese:"语文书",
        mathmatics:"数学书",
        english:"英文书"
      }
    }
  });
</script>

使用第二个参数作为键名：

<div id="book">
  <ul>
    <li v-for="(value, key) in books">
      {{ key }} : {{ value }}
    </li>
  </ul>
</div>

使用第三个参数作为索引：

<div id="book">
  <ul>
    <li v-for="(value, key, index) in books">
      {{ index }} . {{ key }} : {{ value }}
    </li>
  </ul>
</div>

迭代整数：

<div id="num">
  <ul>
    <li v-for="n in 10">
      {{ n }}
    </li>
  </ul>
</div>