Date-06-循环和条件

作者: 啊肉怪 | 来源:发表于2019-03-06 19:05 被阅读0次

Date-06-循环和条件
条件和循环
条件和循环
Linux结构化语句-条件与循环
while和do while循环语句
JavaScript教程day07-循环
Swift-标签语句
条件判断和循环
条件判断和循环
循环和条件分支

v-if举例：

<div id = "app">
    <p v-if="status === 1">当status为1时显示该行</p>
    <p v-else-if="status === 2">当status为2时显示该行</p>
    <p v-else>否则显示该行</p>
</div>
<script>
 var app = new Vue({
     el : '#app',
     data:{
       status:1
    }
})
</script

转载于简书作者陶然然_niit

v-show举例：

<div id = "app">
    <p v-show="status === 1">当status为1时显示该行</p>
</div>
<script>
 var app = new Vue({
     el : '#app',
     data:{
       status:2
    }
})
</script>

循环举例：

<div id = "app">
    <ul>
       <li v-for="book in books">
          {{book.name}}
      </li>
    </ul>
</div>
<script>
  var app = new Vue({
      el : '#app',
      data:{
         books:[
           { name : 'Vue.js'},
           { name : 'JavaScript'},
           { name : 'HTML5+CSS3'},
          ]
     }
})
</script>

条件与循环结合的一个综合练习：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js起步</title>
        
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style type="text/css">
            .top{
                display: flex;
                width: 90%;
                margin: 0 auto;
                align-items: center;
                justify-content: space-between;

            }
            .container{
                display:flex;
                width: 80%;
                margin: 0 auto;
            }
            .card{
                width: 200px;
                height: 250px;
                margin-right: 30px;
                border: 1px solid #fff;
                border-radius: 10px;
            }
            .card img{
                width: 100%;
                height: 100%;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
            .head{
                display: flex;
            }
            .head img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
            }

        </style>
    </head>
    <body>
        <div id="app">
            <div class="top" >
            <h3>进行中的班课</h3>
            <h3>4个进行中的班课</h3>
            </div>
            <hr>
            <div class="container">
                <div class="card" v-for="book in books">
                    <img :src="book.cover" />
                    <div>
                        <p>{{book.classname}}</p>
                        <p>{{book.bookname}}</p>
                        </div>
                        <div class="head">
                        <img :src="book.cover2"/>
                        <p>{{book.name}}</p>
                            </div>
                    </div>  
                </div>
            </div> 
            <script type="text/javascript">
                //实例化一个Vue对象
                var app=new Vue({
                    el:'#app',
                    data: {
                          show: true,
                         books:[
                              {
                                  cover:'img/vue.jpg',
                                  classname:'软件1721',
                                  bookname:'vuejs',
                                  cover2:'img/xmq.jpg',
                                  name:'许莫淇'
                                
                              },
                              {
                                    cover:'img/spring5.jpg',
                                  classname:'软件1721',
                                  bookname:'web前端框架技术',
                                  cover2:'img/xmq.jpg',
                                  name:'许莫淇'
                              },
                              {
                                    cover:'img/web.jpg',
                                  classname:'软件1721',
                                  bookname:'Web应用开发',
                                  cover2:'img/wp.jpg',
                                  name:'王萍'
                              },
                              {
                                   cover:'img/2.jpg',
                                  classname:'软件1721',
                                  bookname:'英雄联盟',
                                  cover2:'img/lzk2.jpeg',
                                  name:'石雪'
                              }
                          ]
                    }
                })
                
            </script>
    </body>
</html>

    </head>
    <body>
    </body>
</html>

image.png