freeCodeCamp/guide/chinese/vue/control-flow/index.md

title, localeTitle

title	localeTitle
Control Flow	控制流

控制流

条件语句

使用Vue.js，您可以决定是否在最终显示或不显示一段代码 页面，取决于某些条件。例如，想象一下表单输入 需要一个至少8个字符长的文本：如果用户输入短于8， 应该出现错误信息;但如果输入长于8，则 消息消失。

但让我们举一个更简单的例子。我们想要解决一个问题 消息到柜台：

<div id="app"> 
  <p v-if="counter > 10"> 
    This message is only rendered when the counter is greater than 10 
  </p> 
 </div> 

let app = new Vue({ 
  el: '#app', 
  data: { 
    counter: 0 
  } 
 }); 

如果你去控制台并开始递增计数器，当它穿过我们的 阈值为10，将显示消息！然后，如果你递减counter ， 当counter低于10时，Vue.js将隐藏消息。为此，我们 使用了指令v-if 。

你可能会想，如果有一个else为该if 。而且有 v-else 。请注意， v-else将始终

• 期待v-if之前
• 指的是页面中最接近的v-if

让我们改变一下我们的第一个例子来实现这一点。

<div id="app"> 
  <p v-if="counter > 10"> 
    This message is only rendered when the counter is greater than 10 
  </p> 
  <p v-else> 
    And this is the "otherwise" option 
  </p> 
 </div> 

let app = new Vue({ 
  el: '#app', 
  data: { 
    counter: 0 
  } 
 }); 

通过改变counter值来玩一点，并注意 消息显示。

Vue.js也有v-else-if指令。

循环

Vue.js还可以帮助生成相同代码的多个副本 结构，带有循环。经典示例是动态呈现的列表。

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

let app = new Vue({ 
  el: '#app', 
  data: { 
    list: [ 
      "shave", 
      "do the dishes", 
      "clean the sink", 
      "pay the bill" 
    ] 
  } 
 }); 

比插入很多<li>更容易。并注意每当list 变化，结果会相应改变。尝试一下：打开控制台和 push一些字符串push送到list中

app.list.push("something else"); 

正如所料，现在呈现的页面有我们全新的项目！