Vue条件和循环语句

1.条件判断
　条件判断使用 v-if 指令：

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>Vue教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈！！！</p>
    </template>
</div>
<script>
new Vue({
     
     
  el: '#app',
  data: {
     
     
    seen: true,
    ok: true
  }
})
</script>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

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

v-else
　 可以用 v-else 指令给 v-if 添加一个 “else” 块：

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
     
     
  el: '#app'
})
</script>

2.循环语句
　循环使用 v-for 指令。
　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>

模板中使用 v-for：

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

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

<div id="app">
  <ul>
    <li v-for="value in object">
    {
   
   { value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
     
     
  el: '#app',
  data: {
     
     
    object: {
     
     
      name: 'Vue测试',
      url: 'https://blog.csdn.net',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

v-for 迭代整数
　v-for 也可以循环整数

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