[Vue]条件与循环v-if v-for(二)

v-if

  • 条件判断
/*如果seen为真则显示'快看我!'*/
<p v-if="seen">快看我!</p>

v-for

  • 循环
/*遍历游戏列表，并显示游戏名称*/
<ol>
    <li v-for="game in games">
      {{ game.title }}
    </li>
  </ol>

综合示例

<div id="myApp">
  <h3>游戏列表</h3>
  <div v-if="seen">最新游戏
    <ol>
      <li v-for="game in games">
        {{game.title}} / {{game.price}}元
      </li>
    </ol>
  </div>
</div>
<script>
  var myApp = new Vue({
    /*绑定标签的id*/
    el: '#myApp',
    /*标签上绑定的数据*/
    data: {
      seen: false,
      games: [
        {title: '勇者斗恶龙', price: 400},
        {title: '最终幻想', price: 580},
        {title: '坦克大战', price: 99},
      ],
    },
  })
</script>

完整源码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>hellovue</title>
</head>
<body>
<div id="myApp">
  <h3>游戏列表</h3>
  <div v-if="seen">最新游戏
    <ol>
      <li v-for="game in games">
        {{game.title}} / {{game.price}}元
      </li>
    </ol>
  </div>
</div>
<script>
  var myApp = new Vue({
    /*绑定标签的id*/
    el: '#myApp',
    /*标签上绑定的数据*/
    data: {
      seen: true,
      games: [
        {title: '勇者斗恶龙', price: 400},
        {title: '最终幻想', price: 580},
        {title: '坦克大战', price: 99},
      ],
    },
  })
</script>
</body>
</html>

  • 当seen改为false时则不会显示列表信息

END

posted @ 2020-03-05 11:09  LeoShi2020  阅读(1618)  评论(0)  编辑  收藏  举报