zoukankan      html  css  js  c++  java
  • [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

  • 相关阅读:
    Python基础
    pip install psycopg2出现python setup.py egg_info failed with error code 1 in /tmp/pip-build-YtLeN3/psycopg2错误处理
    Python基础
    C语言基础
    benchmarks
    用 MuGo 搭建 Go Engine 在 KGS 对战
    GPU
    linux 杀掉僵尸进程 (zombie process, defunct)
    CMakeLists.txt 语法
    软件列表(按字母排序)
  • 原文地址:https://www.cnblogs.com/leoshi/p/12419049.html
Copyright © 2011-2022 走看看